/* Trang nội dung server render (NUT-37, NUT-38): món ăn, methodology, features, use cases, blog.
   Độc lập, không nạp styles.css hay landing.css. Palette và font lấy từ landing.css ("Price Gun").
   font-display: optional: chữ không bao giờ đổi font giữa chừng nên không có layout shift; font được preload (Bowlby) hoặc cache từ trang trước. */

@font-face {
  font-family: "Bowlby One";
  src: url("fonts/BowlbyOne-Regular.woff2?v=nut33b") format("woff2");
  font-weight: 400;
  font-display: optional;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular-Latin1.woff2?v=nut33b") format("woff2");
  font-weight: 400;
  font-display: optional;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium-Latin1.woff2?v=nut33b") format("woff2");
  font-weight: 500 700;
  font-display: optional;
}

:root {
  --paper: #f6f3ec;
  --paper-2: #ebe6d8;
  --card: #fffdf6;
  --ink: #1a1a1a;
  --muted: #5a5448;
  --label: #ff8a3d;
  --accent-text: #b8400f;
  --star: #ffd23f;
  --till-fg: #7cf08a;
  --rule: #cfc8b8;
  --display: "Bowlby One", "Arial Black", Impact, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --maxw: 1120px;
  /* NUT-169: một khung chung cho mọi trang công khai = độ rộng lưới 3 cột của /blog (176-1264 px ở 1440).
     Bảng, lưới, ảnh, figure tràn hết cột; chỉ đoạn văn, danh sách, tiêu đề phụ giữ độ dài dòng --measure, thẳng mép trái. */
  --measure: 68ch;
  /* NUT-153: thang 4 px và bán kính cho khối landing (.jc-docs/design/NUT-153/design.md). */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --r-control: 4px;
  --r-frame: 12px;
  --r-widget: 16px;
  --r-phone: 24px;
  /* Chỉ khung chat minh hoạ: app của AI không phải Remembite nên không dùng font thương hiệu (như widget trong host). */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --accent-soft: #ffe8d6;
  --src-checked: #2f7d4a;
}

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

html,
body {
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.95rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

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

ul,
ol {
  padding: 0;
}

a {
  color: var(--accent-text);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--star);
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -4rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 100;
}

.skip:focus {
  top: 8px;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
}

.brand svg {
  width: 30px;
  height: 30px;
}

.logo-bg {
  fill: var(--ink);
}
.logo-plate {
  fill: var(--label);
}
.logo-stroke {
  fill: none;
  stroke: var(--till-fg);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px 20px;
  list-style: none;
}

.nav-links a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.88rem;
}

.nav-links a:not(.btn):hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.nav-links .menu {
  display: none;
}

.nav-menu summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 6px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  list-style: none;
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary::after {
  content: "\25BE";
  margin-left: 4px;
}

.nav-menu ul {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.nav-menu ul a {
  display: block;
  padding: 12px 10px;
}

/* Trên màn hình hẹp 4 link gộp vào menu <details> (không JS); nút Get started free luôn hiện, không xuống dòng. Cùng breakpoint với landing.css và styles.css. */
@media (max-width: 800px) {
  .nav-links .opt {
    display: none;
  }
  .nav-links .menu {
    display: list-item;
  }
  .nav .btn.small {
    white-space: nowrap;
  }
}

/* Dưới 480px không đủ chỗ cho chữ Remembite, menu và nút Get started free trên một hàng: chỉ giữ logo (link vẫn có aria-label). */
@media (max-width: 480px) {
  .nav .brand {
    gap: 0;
    font-size: 0;
  }
}

/* Button */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 46px;
  padding: 10px 20px;
  border: 3px solid var(--ink);
  border-radius: 4px;
  background: var(--label);
  color: var(--ink);
  font: 500 0.95rem/1.2 var(--mono);
  text-align: center;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--ink);
}

.btn:hover {
  color: var(--ink);
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.btn.small {
  min-height: 38px;
  padding: 0 10px;
  font-size: 0.8rem;
  line-height: 1.15;
  box-shadow: 3px 3px 0 var(--ink);
}

.btn.ghost {
  background: var(--card);
}

/* Footer */

.site-footer {
  padding: 32px 0 44px;
  border-top: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.82rem;
}

.site-footer .wrap {
  display: grid;
  gap: 14px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
}

.site-footer a {
  color: var(--star);
}

.site-footer :focus-visible {
  outline-color: var(--star);
  box-shadow: none;
}

.site-footer p {
  max-width: 70ch;
  color: #d9d3c3;
}

/* Nội dung */

.prose {
  padding-block: 40px 72px;
}

.seo > * + * {
  margin-top: 16px;
}

.seo h1 {
  font: 400 clamp(1.7rem, 6vw, 2.6rem) / 1.15 var(--display);
  max-width: 24ch;
  margin-top: 0;
}

.seo h2 {
  font: 400 clamp(1.25rem, 4vw, 1.6rem) / 1.25 var(--display);
  margin-top: 36px;
}

.seo h1,
.seo h2 {
  text-wrap: balance;
}

.seo h3 {
  font-size: 1.05rem;
  font-weight: 500;
}

.seo > p,
.seo > ul,
.seo > ol,
.seo .article > :is(p, ul, ol:not(.steps), h2, h3, blockquote, .fit, .worked),
.seo .article > section > :is(p, ul:not([class]), ol:not([class]), h3) {
  max-width: var(--measure);
}

.seo ul,
.seo ol {
  padding-left: 1.4rem;
}

.seo li + li {
  margin-top: 6px;
}

.seo .article > * + * {
  margin-top: 16px;
}

.seo .article > h2 {
  margin-top: 36px;
}

.seo .article > h3 {
  margin-top: 24px;
}

.seo strong {
  font-weight: 500;
}

/* Nhãn trạng thái dưới tiêu đề mục (NUT-107, render.ts statusTags): chữ mang nghĩa, màu chỉ để quét nhanh. */
.seo h2 .statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.seo h2 .status {
  padding: 2px 8px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  font: 500 0.75rem/1.4 var(--mono);
  letter-spacing: 0.02em;
}

.seo h2 .status.now {
  background: #c9f2cf;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.seo code {
  background: var(--paper-2);
  padding: 1px 5px;
  font-size: 0.9em;
}

.seo blockquote {
  border-left: 4px solid var(--label);
  padding-left: 16px;
  color: var(--muted);
}

.seo figcaption {
  font-size: 0.82rem;
  color: var(--muted);
}

.seo figure img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
}

.lede {
  font-size: 1.05rem;
  color: var(--muted);
}

.fine,
.meta {
  font-size: 0.82rem;
  color: var(--muted);
}

.tbl {
  overflow-x: auto;
}

.tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.tbl th,
.tbl td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  border-top: 1px solid var(--rule);
}

.tbl thead th {
  color: var(--muted);
  font-weight: 500;
  border-top: 0;
  border-bottom: 1px solid var(--ink);
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.crumbs li + li {
  margin-top: 0;
}

.crumbs li + li::before {
  content: "/";
  margin-right: 8px;
}

/* Khối cuối bài, danh sách, thẻ */

.cta {
  max-width: 68ch;
  margin-top: 48px;
  padding: 20px;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  /* NUT-100: khoảng cách đều giữa tiêu đề, câu và hàng nút (thang 4 px). */
  display: grid;
  gap: 12px;
}

.cta h2,
.cta p {
  margin: 0;
}

.cta .cta-row {
  margin-top: 4px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* NUT-114: màn hình hẹp, hai nút CTA xếp chồng cùng bề rộng thay vì một hàng lệch. */
@media (max-width: 480px) {
  .cta-row .btn {
    flex: 1 1 100%;
  }
}

/* NUT-114: ghi chú "Where Remembite fits" giữa bài (render.ts bọc). Nhẹ hơn CTA: không bóng đổ, viền trái màu nhãn. */
.seo .article > .fit {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 8px solid var(--label);
}

.seo .article > .fit + h2 {
  margin-top: 36px;
}

.fit strong:first-child {
  display: block;
  margin-bottom: 4px;
  color: var(--accent-text);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.related {
  max-width: 68ch;
}

.cards {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
  max-width: 68ch;
}

.cards li {
  position: relative;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--ink);
}

.cards li + li {
  margin-top: 0;
}

.cards h2 {
  margin-top: 6px;
  font-size: 1.1rem;
  line-height: 1.35;
}

.cards a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* NUT-154: /blog là lưới thẻ có ảnh bìa (ảnh OG của bài). 1 cột < 640, 2 cột 640-1023, 3 cột >= 1024.
   Thẻ đầu (bài mới nhất) chiếm cả hàng từ 1024 px: ảnh 2 cột + chữ 1 cột, thẳng hàng với lưới nhờ subgrid.
   Link tiêu đề phủ cả thẻ (::after); focus vẽ trên lớp phủ để vòng focus bao cả thẻ. Đặc tả: .jc-docs/design/NUT-154/design.md. */
.seo > .posts {
  list-style: none;
  padding: 0;
  max-width: none;
  margin-top: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.seo .posts > li {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--ink);
}

.posts > li:hover {
  box-shadow: 4px 4px 0 var(--ink);
}

/* Ảnh bìa 1200x750 (16:10), nền --paper trùng nền ảnh; contain để ảnh OG 1200x630 dự phòng cũng không bị cắt. */
.posts .thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* < 640 px: thẻ ngang gọn (ảnh 120 px trái; nhãn, tiêu đề, ngày phải) để trang ngắn lại; thẻ đầu vẫn là thẻ đầy đủ.
   Vòng 3 (uma P1): ảnh contain trên --paper (cả bìa thu nhỏ, không cắt thành dải); nhãn stage giữ lại (uma P2). */
@media (max-width: 639.98px) {
  .seo .posts > li:not(.lead) {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .posts > li:not(.lead) .thumb {
    height: 100%;
    aspect-ratio: auto;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }

  .posts > li:not(.lead) .post-body {
    gap: 4px;
    padding: 12px;
  }

  .posts > li:not(.lead) .stage {
    padding: 0 6px;
    font-size: 0.7rem;
  }

  .posts > li:not(.lead) .desc {
    display: none;
  }

  .seo .posts > li:not(.lead) h2 {
    font-size: 0.95rem;
  }

  .seo > .posts {
    gap: 12px;
  }
}

.post-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 16px 20px 20px;
}

.seo .posts h2 {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.posts h2 a {
  color: var(--ink);
  text-decoration: none;
}

.posts > li:hover h2 a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.posts a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.posts a:focus-visible {
  outline: none;
  box-shadow: none;
}

.posts a:focus-visible::after {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--star);
}

.posts .desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.88rem;
  color: var(--muted);
}

.posts .meta {
  margin-top: auto;
  padding-top: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

@media (min-width: 640px) {
  .seo > .posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Thẻ đầu chỉ rộng khi đủ 3 cột: ảnh 2 cột (giữ nguyên tỉ lệ, nền --paper trùng nền ảnh OG nên phần dư không lộ), chữ 1 cột. */
@media (min-width: 1024px) {
  .seo > .posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .seo .posts > .lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
  }

  .posts > .lead .thumb {
    grid-column: span 2;
    height: 100%;
    object-fit: contain;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }

  .posts > .lead .post-body {
    justify-content: center;
    gap: 12px;
    padding: 24px 24px 24px 20px;
  }

  .seo .posts > .lead h2 {
    font-size: clamp(1.3rem, 1.8vw, 1.6rem);
    line-height: 1.2;
  }

  .posts > .lead .desc {
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 0.95rem;
  }

  .posts > .lead .meta {
    margin-top: 4px;
  }
}

.stage {
  display: inline-block;
  padding: 2px 8px;
  background: var(--label);
  border: 1px solid var(--rule);
  font-size: 0.75rem;
  font-weight: 500;
}

@media (min-width: 720px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }
}

/* Trang món ăn */

.variants {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-bottom: 28px;
}

@media (min-width: 720px) {
  .variants {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.variant {
  background: var(--card);
  border: 1px solid var(--ink);
  padding: 16px;
  min-width: 0;
}

.variant h3 {
  overflow-wrap: anywhere;
}

.variant .tag {
  margin: 0 0 8px;
  font-size: 0.82rem;
  color: var(--muted);
}

.variant .big {
  margin: 0;
  font-size: 1.05rem;
}

.variant .big strong {
  font-size: 1.5rem;
}

.variant .big span {
  color: var(--muted);
  font-size: 0.82rem;
}

.macros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 8px 12px;
  margin: 14px 0 0;
}

.macros div {
  background: var(--paper-2);
  padding: 8px 12px;
}

.macros dt {
  font-size: 0.75rem;
  color: var(--muted);
}

.macros dd {
  font-weight: 500;
}

.servings {
  width: 100%;
  margin: 16px 0 0;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.servings caption {
  text-align: left;
  font-weight: 500;
  padding-bottom: 6px;
}

.servings th,
.servings td {
  text-align: left;
  vertical-align: top;
  padding: 6px 8px 6px 0;
  border-top: 1px solid var(--rule);
}

/* NUT-128: tiêu đề cột và ô số không ngắt giữa chữ; chỉ cột nhãn xuống dòng, ở ranh giới từ. */
.servings thead th,
.servings td {
  white-space: nowrap;
}

.servings thead th {
  color: var(--muted);
  font-weight: 500;
}

.servings tbody th {
  font-weight: 400;
  overflow-wrap: break-word;
}

.variant .source {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* NUT-132: khối "3 bước" đầu trang /connect (render.ts dựng, fragment không có class). Chép nguyên vào cuối apps/web/seo.css.
   Chỉ dùng token sẵn có của seo.css; thang 4 px; viền mực 3px + bóng cứng như .cta. */

.start {
  margin-top: 24px;
  padding: 20px;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.start > h2 {
  margin: 0 0 16px;
}

.start-steps {
  counter-reset: start;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo .start-steps > li + li {
  margin-top: 0;
}

.start-steps > li {
  counter-increment: start;
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 0 16px 48px;
  border-top: 1px dashed var(--muted);
}

.start-steps > li:first-child {
  border-top: 0;
  padding-top: 0;
}

.start-steps > li::before {
  content: counter(start);
  position: absolute;
  left: 0;
  top: 16px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--label);
  border: 2px solid var(--ink);
  font: 400 1.1rem/1 var(--display);
}

.start-steps > li:first-child::before {
  top: 0;
}

.start-steps h3 {
  font-size: 1.05rem;
  font-weight: 500;
}

.start-steps .btn {
  justify-self: start;
  margin-top: 4px;
}

/* URL connector: chọn cả chuỗi bằng một chạm, không ngắt giữa chừng trừ khi buộc phải. */
.start-steps .url {
  display: block;
  padding: 8px 12px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow-x: auto;
  user-select: all;
}

/* Khoảng cách sau khối: bóng 6px ăn vào khoảng 16px mặc định của .seg > * + *. */
.seo .start + .article {
  margin-top: 32px;
}

@media (min-width: 600px) {
  .start-steps .url {
    font-size: 0.95rem;
  }
}

.start-steps .say {
  padding: 8px 12px;
  background: var(--paper);
  border-left: 4px solid var(--label);
}

.start-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 0.82rem;
  color: var(--muted);
}

@media (min-width: 960px) {
  .start {
    padding: 24px;
  }
  .start-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .start-steps > li,
  .start-steps > li:first-child {
    padding: 48px 0 0;
    border-top: 0;
  }
  .start-steps > li::before,
  .start-steps > li:first-child::before {
    top: 0;
  }
  .start-steps > li + li {
    padding-left: 24px;
    border-left: 1px dashed var(--muted);
  }
  .start-steps > li + li::before {
    left: 24px;
  }
}

/* NUT-145: bài blog dài. Mục lục (render.ts articleHtml), khung hình, bảng rộng, khối Worked example.
   Đặc tả cho writer: .jc-docs/design/NUT-145/design.md. Không JS: trang nội dung không nạp script nào. */

@media (prefers-reduced-motion: no-preference) {
  html:has(.toc) {
    scroll-behavior: smooth;
  }
}

.toc ol,
.toc-m ol {
  list-style: none;
  padding: 0;
  counter-reset: toc;
}

.toc li,
.toc-m li {
  counter-increment: toc;
}

.seo .toc li + li,
.seo .toc-m li + li {
  margin-top: 0;
}

.toc a,
.toc-m a {
  display: grid;
  grid-template-columns: 2.4ch 1fr;
  gap: 8px;
  min-height: 24px;
  padding: 8px 0;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.4;
}

.toc a::before,
.toc-m a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--accent-text);
  font-weight: 500;
}

.toc a:hover,
.toc-m a:hover {
  text-decoration: underline;
}

/* Mobile và tablet: khối thu gọn ngay trước mục đầu tiên sau Key takeaways. */
.seo .article > .toc-m {
  margin-top: 24px;
}

.toc-m details {
  background: var(--card);
  border: 1px solid var(--rule);
}

.toc-m summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

.toc-m summary::-webkit-details-marker {
  display: none;
}

.toc-m summary::after {
  content: "\25BE";
  margin-left: auto;
  font-size: 1.1rem;
  line-height: 1;
}

.toc-m details[open] summary::after {
  transform: rotate(180deg);
}

.toc-m details[open] summary {
  border-bottom: 1px solid var(--rule);
}

.toc-m .toc-count {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 400;
}

.toc-m ol {
  padding: 4px 16px 8px;
  font-size: 0.88rem;
}

.toc-m li + li a {
  border-top: 1px solid var(--rule);
}

.toc-rail {
  display: none;
}

/* Desktop: cột phải dính cạnh nội dung. NUT-169: theo lưới 3 cột của /blog (gap 24px): bài chiếm cột 1-2, mục lục cột 3,
   nên mục lục chạm mép phải khung (cùng mép header) và mép bài trùng mép ảnh thẻ đầu của /blog. */
@media (min-width: 1024px) {
  .post {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-6);
    align-items: start;
  }
  .post > .article {
    grid-area: 1 / 1 / auto / span 2;
  }
  .toc-rail {
    grid-area: 1 / 3;
    display: block;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    /* Chừa chỗ cho vòng focus (outline 3 + offset 3 + bóng 6 px) khỏi bị overflow cắt; margin âm giữ nguyên vị trí. */
    padding: 12px;
    margin: -12px;
  }
  .seo .article > .toc-m {
    display: none;
  }
}

.toc {
  padding-left: 16px;
  border-left: 1px solid var(--rule);
  font-size: 0.82rem;
}

.seo .toc h2 {
  margin: 0 0 4px;
  color: var(--accent-text);
  font: 500 0.75rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.toc li + li a {
  border-top: 1px solid var(--rule);
}

/* Hình: chart/sơ đồ SVG rộng tối đa cột, caption rồi dòng nguồn nhỏ. */
.seo .article > figure {
  margin-top: 24px;
}

/* NUT-169: trang không có mục lục: sơ đồ SVG (chữ vẽ sẵn trong ảnh) rộng 2 trên 3 cột khung, để chữ trong ảnh không phình quá cỡ chữ bài.
   Bảng và lưới thẻ vẫn tràn hết 3 cột. Trang có mục lục: cột bài đã là 2 cột nên ảnh rộng hết cột. */
@media (min-width: 1024px) {
  .seo .article > figure {
    max-width: calc((100% - 2 * var(--sp-6)) / 3 * 2 + var(--sp-6));
  }
  .seo .post > .article > figure {
    max-width: none;
  }
}

.seo .article > figure + * {
  margin-top: 24px;
}

.seo figcaption .fig-cap {
  color: var(--ink);
}

.seo figcaption .fig-src {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: var(--muted);
}

/* Bảng rộng: cột không bị bóp quá hẹp; bảng 4 cột trở lên cuộn ngang trong khung, bóng mép báo còn nội dung. */
.tbl {
  background:
    linear-gradient(to right, var(--paper) 30%, rgb(246 243 236 / 0)) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 30%, rgb(246 243 236 / 0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(26 26 26 / 0.28), transparent) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(26 26 26 / 0.28), transparent) right / 12px 100% no-repeat scroll;
}

.tbl th,
.tbl td {
  min-width: 9ch;
}

.tbl table:has(tr > :nth-child(4)) {
  min-width: 34rem;
}

.tbl td:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

/* NUT-179: gợi ý cuộn ngang trên bảng. Không JS: bảng >= 4 cột dưới 576 px. Có JS: rail.js đặt data-scroll. */
.tbl-cue {
  display: none;
  justify-content: flex-end;
  align-items: baseline;
  gap: var(--sp-2);
  color: var(--accent-text);
  font-size: 0.78rem;
  font-weight: 500;
}

.tbl-cue::after {
  content: "\2192";
  font-size: 1rem;
  line-height: 1;
}

.seo .article > p.tbl-cue {
  max-width: none;
  margin-top: var(--sp-6);
}

.tbl-cue .end {
  display: none;
}

.seo .article > .tbl-cue + .tbl {
  margin-top: var(--sp-2);
}

@media (max-width: 575px) {
  .tbl-cue.wide {
    display: flex;
  }
}

.tbl-cue[data-scroll] {
  display: flex;
}

.tbl-cue[data-scroll="none"] {
  display: none;
}

.tbl-cue[data-scroll="end"] {
  color: var(--muted);
}

.tbl-cue[data-scroll="end"] .more,
.tbl-cue[data-scroll="end"]::after {
  display: none;
}

.tbl-cue[data-scroll="end"] .end {
  display: inline;
}

.tbl-cue[data-scroll="end"]::before {
  content: "\2190";
  font-size: 1rem;
  line-height: 1;
}

/* Worked example: khung "biên lai" viền đứt, nhãn cam như tem giá; phép tính trong <code>. */
.seo .article > .worked {
  margin-top: 24px;
  padding: 16px 20px 20px;
  background: var(--card);
  border: 1px dashed var(--muted);
}

.seo .worked > * + * {
  margin-top: 12px;
}

.worked > p:first-child > strong:first-child {
  display: table;
  margin-bottom: 8px;
  padding: 2px 8px;
  background: var(--label);
  border: 1px solid var(--rule);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* NUT-147: trang món v2 và hub /calories/. Chép nguyên khối này vào cuối apps/web/seo.css (sau khối NUT-145), bump CSS_VERSION.
   Chỉ dùng token có sẵn: --paper --paper-2 --card --ink --muted --label --accent-text --rule --mono --display. Thang 4 px.
   Hướng NUT-149: một cam #ff8a3d làm mảng, #b8400f cho chữ cam; đường kẻ 1px --rule thay vì 2-3px mực.
   Đặc tả: .jc-docs/design/NUT-147/design.md. Không JS, không style="" (CSP style-src 'self'). */

/* Mục lục dùng chung với blog (NUT-145), làm nhẹ theo NUT-149: áp dụng cả bài blog. */
.toc {
  border-left: 1px solid var(--rule);
}

.toc-m details {
  border: 1px solid var(--rule);
}

.toc-m details[open] summary {
  border-bottom: 1px solid var(--rule);
}

/* Đầu trang: H1, câu trả lời, dòng cập nhật. */
.seo > .answer {
  max-width: 60ch;
  font-size: 1.1rem;
  line-height: 1.55;
}

.answer strong {
  padding: 0 2px;
  font-weight: 500;
  white-space: nowrap;
  background: linear-gradient(transparent 62%, rgb(255 138 61 / 0.45) 62%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.seo > .answer + .meta {
  margin-top: 8px;
}

.seo > .meta + .post {
  margin-top: 32px;
}

/* Nhịp mục: 48 giữa các mục, 16 trong mục, 32 trước h3 thứ hai trở đi. */
.food .article > section + section {
  margin-top: 48px;
}

.food .article > .toc-m + section {
  margin-top: 24px;
}

.food .article section > * + * {
  margin-top: 16px;
}

.food .article section > h2 {
  margin-top: 0;
}

.food .article section > h3 {
  margin-top: 32px;
}

.food .article section > h2 + h3,
.food .article section > h2 + p + h3 {
  margin-top: 16px;
}

.food .article section > h3 + .tbl {
  margin-top: 8px;
}

/* Bảng "Calories by amount": bảng giá. Nhãn trái, số phải, đơn vị ở tiêu đề cột. */
.tbl table.amounts {
  font-size: 0.88rem;
}

.amounts th,
.amounts td {
  padding: 8px 12px 8px 0;
}

.amounts thead th {
  vertical-align: bottom;
  line-height: 1.3;
}

.amounts tbody th {
  font-weight: 400;
  min-width: 12ch;
}

.amounts .num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.amounts td.kcal {
  font-weight: 500;
}

/* Khoảng ước lượng: cùng ô, nhỏ và nhạt, không tách cột (giữ tối đa 5 cột). */
.amounts .rng {
  margin-left: 8px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 400;
}

/* Dưới 720 px cột Basis nằm ngoài khung (cuộn ngang): giữ một dòng để hàng không cao gấp đôi. */
@media (max-width: 719px) {
  .amounts td.basis {
    max-width: none;
    white-space: nowrap;
  }
}

.amounts tbody th .sub {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.amounts td.basis {
  min-width: 16ch;
  max-width: 26ch;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Hàng tiêu đề nhóm (Cooked white rice, Dry white rice, ...): chữ cam mực, không nền, không viền đậm. */
.amounts tr.grp th {
  padding: 20px 0 6px;
  border-top: 0;
  color: var(--accent-text);
  font-size: 0.82rem;
  font-weight: 500;
}

.amounts tbody:first-of-type tr.grp th {
  padding-top: 12px;
}

.amounts tr.grp + tr > * {
  border-top-color: var(--ink);
}

/* Bảng ước lượng của Remembite (bảng riêng sau bảng USDA): đường kẻ đứt, câu cố định dưới nhãn hàng. */
.amounts.est tbody th,
.amounts.est tbody td {
  border-top: 1px dashed var(--muted);
}

.amounts.est tbody th {
  min-width: 12ch;
}

/* Bảng 4 cột trở lên rộng tối thiểu 30rem (không phải 34rem của blog) để ở 390 px ba cột đầu: lượng, gram, kcal vẫn trong khung. */
.tbl table.amounts:has(tr > :nth-child(4)) {
  min-width: 30rem;
}

.tbl-note {
  max-width: 68ch;
  color: var(--muted);
  font-size: 0.82rem;
}

/* Per 100 g: thẻ biến thể (có sẵn), số thẻ quyết định lưới. */
.food .variants {
  margin-bottom: 0;
}

@media (min-width: 720px) {
  .variants.n1 {
    grid-template-columns: minmax(0, 30rem);
  }
  .variants.n3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .variants.n3 .macros {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .variants.n3 .macros div {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 8px;
  }
}

/* Khối hệ số đổi: ARS (thịt) hoặc tính từ hai bản ghi (hạt, đậu, pasta). Cá và món khác: không có khối này. */
.yield {
  display: grid;
  gap: 12px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--rule);
}

.seo .yield > * + * {
  margin-top: 0;
}

.yield-label {
  color: var(--accent-text);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.yield-bars {
  display: grid;
  grid-template-columns: minmax(9ch, auto) minmax(0, 1fr);
  align-items: center;
  gap: 8px 12px;
  margin: 0;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.yield-bars dd svg {
  display: block;
  width: 100%;
  height: 16px;
}

.yield .fine {
  margin: 0;
}

/* Chart so sánh: SVG nội tuyến cùng quy tắc NUT-145, khung như figure img của blog. */
.food figure.chart svg {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
  border: 1px solid var(--rule);
  border-radius: 8px;
}

/* FAQ: câu hỏi h3, câu trả lời p, đường kẻ mảnh, không accordion. */
.faq-list {
  display: grid;
}

.faq-list .qa {
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}

.faq-list .qa:last-child {
  border-bottom: 1px solid var(--rule);
}

.faq-list h3 {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
}

.faq-list p {
  max-width: 68ch;
  margin-top: 8px;
}

/* Hàng món: dùng chung cho "Often eaten with" và hub. Tên (link) + khẩu phần dẫn đầu + kcal phải. */
.food-list {
  display: grid;
  list-style: none;
}

.seo .food-list {
  padding: 0;
}

.seo .food-list li + li {
  margin-top: 0;
}

.food-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

.food-list a {
  font-weight: 500;
}

.food-list .serv {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.food-list .kcal {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.more-links {
  display: grid;
  gap: 24px;
}

.more-links h3 {
  font-size: 0.95rem;
}

.seo .more-links ul {
  margin-top: 8px;
}

@media (min-width: 720px) {
  .more-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.seo > .sources {
  max-width: 68ch;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.seo .sources + .sources {
  margin-top: 8px;
  padding-top: 0;
  border-top: 0;
}

/* Hub /calories/: chỉ mục nhóm, các nhóm chảy theo cột (20 đến 60+ món không đổi bố cục). */
.hub-index ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}

.seo .hub-index ul {
  padding: 0;
}

.seo .hub-index li + li {
  margin-top: 0;
}

.hub-index a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.82rem;
  text-decoration: none;
}

.hub-index a:hover {
  border-color: var(--ink);
}

.hub-index a span {
  color: var(--muted);
}

.seo > .hub-groups {
  margin-top: 40px;
  column-gap: 48px;
}

@media (min-width: 900px) {
  .hub-groups {
    columns: 2;
  }
}

@media (min-width: 1200px) {
  .hub-groups {
    columns: 3;
  }
}

.hub-group {
  break-inside: avoid;
  padding-bottom: 32px;
}

.seo .hub-group h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 1.2rem;
}

.hub-group h2 .count {
  flex: none;
  color: var(--muted);
  font: 400 0.82rem/1 var(--mono);
}

.hub-guide {
  max-width: 68ch;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--rule);
}

.seo .hub-guide h2 {
  margin-top: 0;
  font-size: 1.2rem;
}

.seo .hub-guide > * + * {
  margin-top: 12px;
}

/* NUT-147: gợi ý cuộn ngang và bóng mép phải cho bảng 4 cột trở lên, chỉ dưới 720 px. */
p.tbl-hint {
  display: none;
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

@media (max-width: 719px) {
  p.tbl-hint {
    display: block;
  }

  .tbl.wide {
    background:
      linear-gradient(to right, var(--paper) 30%, rgba(246, 243, 236, 0)) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--paper) 30%, rgba(246, 243, 236, 0)) right center / 24px 100% no-repeat local,
      linear-gradient(to left, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll;
  }
}

/* NUT-147 vòng 2: hub có link quay lại danh sách nhóm, h2 nhóm chừa chỗ khi nhảy neo. */
.hub-group h2 {
  scroll-margin-top: 16px;
}

.hub-group .back {
  margin: 12px 0 0;
  font-size: 0.82rem;
}


/* ===== NUT-153: trang landing (/features/<slug>, /use-cases/<slug>) và hub =====
   render.ts + landing.ts dựng markup. Contract cho writer: .jc-docs/design/NUT-153/components.md.
   Mọi khoảng cách từ --sp-*, bán kính từ --r-*. Không JS. */

/* Hero: chữ trái, vật chứng phải (>= 1024 px); dưới đó xếp chồng, chữ trước. */
.seo > .lp-hero {
  display: grid;
  gap: var(--sp-8);
  margin-top: var(--sp-2);
}

.lp-copy {
  display: grid;
  align-content: start;
  gap: var(--sp-4);
}

.lp-copy > * {
  margin: 0;
}

.lp-kind {
  justify-self: start;
  padding: 2px var(--sp-2);
  background: var(--label);
  border: 1px solid var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.seo .lp-hero h1 {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 2.9rem);
  line-height: 1.1;
  max-width: 18ch;
}

.lp-hero .answer {
  max-width: 54ch;
  font-size: 1.05rem;
  line-height: 1.6;
}

.lp-hero .cta-row {
  margin-top: var(--sp-2);
}

.lp-note {
  font-size: 0.82rem;
  color: var(--muted);
}

.lp-visual {
  min-width: 0;
}

/* 390 px: kéo vật chứng lên gần màn hình đầu. Nút ghost "See Claude log a day" có ở CTA cuối trang và menu "Demo". */
@media (max-width: 639px) {
  .lp-hero .answer {
    font-size: 1rem;
  }
  .lp-hero .cta-row .btn.ghost {
    display: none;
  }
}

.lp-visual > figure {
  margin: 0;
}

.seo > .lp-hero + * {
  margin-top: var(--sp-12);
}

.hub-hero .lp-copy {
  max-width: 68ch;
}

@media (min-width: 1024px) {
  .seo > .lp-hero:not(.solo) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--sp-12);
    align-items: center;
  }
  .seo > .lp-hero + * {
    margin-top: var(--sp-16);
  }
}

.lp-hero ~ .doc > .article > h2,
.lp-hero ~ .article > h2 {
  margin-top: var(--sp-12);
}

/* Mục đầu tiên không cộng khoảng cách mục: hero đã tách bằng margin của .post. */
.lp-hero ~ .doc > .article > h2:first-child,
.lp-hero ~ .article > h2:first-child {
  margin-top: 0;
}

@media (min-width: 1024px) {
  .lp-hero ~ .doc > .article > .toc-m:first-child + h2 {
    margin-top: 0;
  }
  .lp-hero ~ .doc > .article > h2,
  .lp-hero ~ .article > h2 {
    margin-top: var(--sp-16);
  }
}

/* Nhãn bắt buộc của ảnh và chat ("Sample data", "Illustration, sample data"): con tem, đọc được, không mờ. */
.seo figcaption .tag {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 0 var(--sp-2);
  background: var(--paper-2);
  border: 1px solid var(--ink);
  border-radius: var(--r-control);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.6;
}

.seo .shot figcaption,
.seo .chat figcaption {
  margin-top: var(--sp-3);
  color: var(--ink);
}

/* Khung ảnh: máy tính = thẻ có thanh trên trơn (không chấm macOS, không URL giả); điện thoại = viền mực, không tai thỏ. */
.seo .article > .shot,
.seo .article > .chat {
  margin-top: var(--sp-8);
}

.seo .article > .shot + *,
.seo .article > .chat + * {
  margin-top: var(--sp-8);
}

.frame {
  position: relative;
  overflow: hidden;
  background: var(--card);
}

.frame.desktop {
  border: 2px solid var(--ink);
  border-radius: var(--r-frame);
  box-shadow: 4px 4px 0 var(--ink);
}

.frame-bar {
  display: block;
  height: var(--sp-5);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}

.frame.phone {
  max-width: 300px;
  padding: var(--sp-2) 6px;
  background: var(--ink);
  border-radius: var(--r-phone);
  box-shadow: 4px 4px 0 var(--rule);
}

.frame.phone .frame-bar {
  display: none;
}

.seo .frame img {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.seo .frame.phone img {
  border-radius: calc(var(--r-phone) - 6px);
}

.shot.phone .frame {
  margin-inline: auto;
}

/* Cặp: ảnh máy tính, ảnh điện thoại đứng cạnh ở góc phải dưới, không che ảnh máy tính (uma P2). Cùng một màn hình ở hai cỡ. */
.frames {
  position: relative;
  padding: 0 30% 10% 0;
}

.frames .frame.phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28%;
  padding: 4px 3px;
  border-radius: var(--r-frame);
}

.seo .frames .frame.phone img {
  border-radius: calc(var(--r-frame) - 4px);
}

/* Dưới 640 px hai ảnh chồng nhau quá nhỏ để đọc (uma P2): chỉ hiện ảnh điện thoại, cỡ thật như .shot.phone. */
@media (max-width: 639px) {
  .frames {
    padding: 0;
  }
  .frames .frame.desktop {
    display: none;
  }
  .frames .frame.phone {
    position: static;
    width: auto;
    max-width: 300px;
    margin-inline: auto;
    padding: var(--sp-2) 6px;
    border-radius: var(--r-phone);
  }
  .seo .frames .frame.phone img {
    border-radius: calc(var(--r-phone) - 6px);
  }
}

/* Khung chat minh hoạ (renderChat). Trung tính: không giống claude.ai hay ChatGPT, font hệ thống, bo 12 px, viền mảnh. */
.chat {
  max-width: 40rem;
}

.chat-frame {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--muted);
  border-radius: var(--r-frame);
  color: var(--ink);
  font: 400 0.95rem/1.5 var(--sans);
}

.seo .chat-frame p {
  margin: 0;
}

.seo .chat-frame .chat-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8rem;
}

.chat-dot {
  width: var(--sp-2);
  height: var(--sp-2);
  border: 1.5px solid var(--muted);
  border-radius: 50%;
}

.seo .chat-log {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
  padding: var(--sp-5) var(--sp-4);
  list-style: none;
}

.seo .chat-log > li + li,
.seo .tool-rows > li + li {
  margin-top: 0;
}

.seo .turn .who {
  margin-bottom: var(--sp-1);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.turn.user {
  justify-self: end;
  max-width: 85%;
}

.seo .turn.user .who {
  text-align: right;
}

.turn.user .bubble {
  padding: 10px 14px;
  background: var(--paper-2);
  border-radius: var(--r-widget) var(--r-widget) var(--r-control) var(--r-widget);
}

.turn.ai .bubble {
  display: grid;
  gap: var(--sp-3);
}

.chat-frame strong {
  font-weight: 600;
}

/* Thẻ kết quả tool: chép hình của widget MCP (apps/server/src/mcp/widget/today.html: renderLogged, renderConfirm). */
.seo .tool-by {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.tool-by::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--label);
  border: 1px solid var(--ink);
  border-radius: 3px;
}

.tool-card {
  display: grid;
  gap: 6px;
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-widget);
  box-shadow: 0 1px 0 var(--rule);
}

.seo .tool-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--sp-3);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tool-eyebrow .pill {
  padding: 1px 10px;
  background: var(--accent-soft);
  border-radius: 999px;
  color: var(--accent-text);
  letter-spacing: 0;
  text-transform: none;
}

.seo .tool-big {
  font: 600 2.2rem/1.1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.tool-big small {
  color: var(--muted);
  font: 400 0.95rem var(--sans);
}

.seo .tool-rows {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.tool-rows li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  border-top: 1px solid var(--rule);
}

.t-name {
  display: grid;
  min-width: 0;
  font-weight: 600;
}

.t-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--sp-2);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.t-kcal {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.src-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.src-glyph {
  flex: none;
  width: var(--sp-2);
  height: var(--sp-2);
}

.src-checked {
  background: var(--src-checked);
  border-radius: 50%;
}

.src-ai {
  border: 1.5px solid var(--muted);
  border-radius: 50%;
}

.src-confirmed {
  width: 7px;
  height: 7px;
  margin: 0 0.5px;
  background: var(--accent-text);
  transform: rotate(45deg);
}

.seo .tool-title {
  margin-top: 2px;
  font: 600 1.2rem/1.25 var(--mono);
}

.tool-lead {
  color: var(--muted);
  font-size: 0.9rem;
}

.tool-dish {
  display: grid;
  gap: var(--sp-1);
  margin-top: 6px;
  padding: var(--sp-3);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-frame);
}

.seo .tool-dish-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-1) var(--sp-3);
}

.tool-dish-top span {
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.tool-dish-top span strong {
  color: var(--ink);
  font-size: 1rem;
}

/* Trích dẫn nỗi đau: lời người dùng thật, có nguồn. Chữ to, dấu mở ngoặc Bowlby cam là trang trí. */
.seo .article > .pain {
  position: relative;
  max-width: 60ch;
  margin-top: var(--sp-8);
  padding-left: var(--sp-12);
}

.seo .article > .pain + .pain {
  margin-top: var(--sp-6);
}

.pain::before {
  content: "\201C" / "";
  position: absolute;
  left: 0;
  top: -6px;
  color: var(--label);
  font: 400 3.5rem/1 var(--display);
}

.seo .pain blockquote {
  padding: 0;
  border: 0;
  color: var(--ink);
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
}

.seo .pain blockquote > p + p {
  margin-top: var(--sp-2);
}

.seo .pain figcaption {
  margin-top: var(--sp-3);
}

/* Bằng chứng: biên lai viền đứt như Worked example. "Study" = nguồn ngoài (tem cam); "From the product" = dữ kiện trong repo (tem giấy). */
.seo .article > .evidence {
  max-width: 68ch;
  margin-top: var(--sp-6);
}

.evidence {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  background: var(--card);
  border: 1px dashed var(--muted);
}

.evidence > p {
  margin: 0;
}

.evidence .stamp {
  justify-self: start;
  padding: 2px var(--sp-2);
  background: var(--label);
  border: 1px solid var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.evidence.ev-fact .stamp {
  background: var(--paper-2);
}

.evidence .ev-name {
  font-weight: 500;
}

.evidence .ev-src {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Bảng so sánh: bảng thật trên màn rộng; dưới 640 px mỗi hàng thành một thẻ "cột: giá trị" (data-label do render gắn). */
.seo .article > .cmp {
  margin-top: var(--sp-6);
}

.cmp {
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 2px solid var(--ink);
  font-size: 0.88rem;
}

.compare th,
.compare td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}

.compare thead th {
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  border-top: 0;
}

.compare tbody th {
  font-weight: 500;
}

@media (max-width: 639px) {
  .compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .compare,
  .compare tbody,
  .compare tr,
  .compare th,
  .compare td {
    display: block;
  }
  .compare tr {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--rule);
  }
  .compare tbody tr:first-child {
    border-top: 0;
  }
  .compare tbody th,
  .compare td {
    padding: 2px 0;
    border: 0;
  }
  .compare tbody th {
    margin-bottom: var(--sp-1);
  }
  .compare td::before {
    content: attr(data-label) ": ";
    color: var(--muted);
  }
}

/* Dải "Limits / Who this is not for": nền giấy 2, viền mảnh. Không màu cảnh báo: đây là nói thẳng, không phải lỗi. */
.limits {
  display: grid;
  gap: var(--sp-3);
  max-width: 68ch;
  padding: var(--sp-6);
  background: var(--paper-2);
  border: 1px solid var(--rule);
}

.seo .article > .limits,
.seo > .limits {
  margin-top: var(--sp-12);
}

.seo .limits > * {
  margin: 0;
}

.seo .limits ul {
  display: grid;
  gap: var(--sp-2);
  padding: 0;
  list-style: none;
}

.seo .limits li {
  position: relative;
  margin: 0;
  padding-left: var(--sp-6);
}

.limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: var(--sp-3);
  height: 2px;
  background: var(--ink);
}

/* Bước có ảnh: số Bowlby như khối /connect. Bước có ảnh điện thoại tách đôi từ 768 px; ảnh máy tính nằm dưới chữ, rộng hết cột. */
.seo .article > .steps {
  display: grid;
  gap: var(--sp-12);
  margin-top: var(--sp-8);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.seo .steps > li {
  counter-increment: step;
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-3);
  margin: 0;
  padding-left: var(--sp-12);
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--sp-8);
  height: var(--sp-8);
  background: var(--label);
  border: 2px solid var(--ink);
  font: 400 1.1rem/1 var(--display);
}

.seo .steps > li > * {
  margin: 0;
  max-width: 68ch;
}

/* Dưới 768 px: bỏ lề trái 48 px để ảnh và chat dùng hết bề ngang; số đứng cạnh tiêu đề bước. */
@media (max-width: 767px) {
  .seo .steps > li {
    padding-left: 0;
  }
  .seo .steps > li > h3:first-child {
    display: flex;
    align-items: center;
    min-height: var(--sp-8);
    padding-left: var(--sp-12);
  }
}

.seo .steps > li > figure {
  max-width: none;
  margin-top: var(--sp-2);
}

/* Ảnh máy tính trong bước: tối đa 40rem để chữ trong ảnh không phóng quá cỡ thật. */
.seo .steps > li > .shot.desktop {
  max-width: 40rem;
}

@media (min-width: 768px) {
  .seo .steps > li:has(> .shot.phone) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    column-gap: var(--sp-8);
  }
  .seo .steps > li:has(> .shot.phone) > :not(figure) {
    grid-column: 1;
  }
  .seo .steps > li:has(> .shot.phone) > .shot.phone {
    grid-column: 2;
    grid-row: 1 / span 6;
    margin-top: 0;
  }
}

/* Hub: lưới thẻ. Features có ảnh thu nhỏ (thẻ đầu rộng 2 cột từ 1024 px); use cases là chữ, mở bằng câu nỗi đau lớn. Cùng hình thẻ /blog (NUT-154). */
.seo > .hub {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  margin-top: var(--sp-12);
  padding: 0;
  list-style: none;
}

.seo .hub > li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--card);
  border: 1px solid var(--ink);
}

.hub > li:hover {
  box-shadow: 4px 4px 0 var(--ink);
}

.seo .hub .thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.hub-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}

.seo .hub-body > * {
  margin: 0;
}

.hub-pain {
  color: var(--accent-text);
  font-size: 0.82rem;
  font-weight: 500;
}

.hub.use-cases .hub-pain {
  color: var(--ink);
  font: 400 clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem) / 1.15 var(--display);
}

.seo .hub :is(h2, h3) {
  font: 500 1.05rem/1.35 var(--mono);
}

.hub :is(h2, h3) a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--label);
  text-decoration-thickness: 2px;
}

.hub > li:hover :is(h2, h3) a {
  text-decoration-color: var(--ink);
}

.hub :is(h2, h3) a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.hub :is(h2, h3) a:focus-visible {
  outline: none;
  box-shadow: none;
}

.hub :is(h2, h3) a:focus-visible::after {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--star);
}

.hub .desc {
  color: var(--muted);
  font-size: 0.88rem;
}

.hub .status {
  margin-top: auto;
  padding: 2px var(--sp-2);
  background: var(--paper-2);
  border: 1px solid var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
}

.hub .status.now {
  background: #c9f2cf;
}

.hub-empty {
  display: grid;
  gap: var(--sp-3);
  max-width: 68ch;
  margin-top: var(--sp-12);
  padding: var(--sp-6);
  background: var(--card);
  border: 1px dashed var(--muted);
}

.seo .hub-empty > p {
  margin: 0;
}

/* Biến thể chữ (thẻ features chưa có ảnh 1200x750): câu nỗi đau lớn trong ô 16:10, cùng chiều cao với thẻ có ảnh. */
.seo .hub .thumb-text {
  display: flex;
  align-items: flex-end;
  margin: 0;
  aspect-ratio: 16 / 10;
  padding: var(--sp-5);
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font: 400 clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem) / 1.15 var(--display);
  text-wrap: balance;
}

/* Hub: CTA và khối "không dành cho ai" rộng bằng lưới, không lệch 68ch dưới lưới 3 cột. */
.hub-hero ~ .limits,
.hub-hero ~ .cta {
  max-width: none;
}

.seo .hub-hero h1 {
  max-width: 26ch;
}

/* Thẻ nằm ngang: ảnh trái, chữ phải. Dùng cho thẻ đầu features và thẻ lẻ cuối hàng (span cả hàng). */
@media (min-width: 640px) and (max-width: 1023px) {
  .seo > .hub {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .seo .hub > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .seo .hub > li:last-child:nth-child(odd) > .thumb {
    width: 50%;
    align-self: flex-start;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
}

@media (min-width: 1024px) {
  .seo > .hub {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .seo .hub.features > .lead,
  .seo .hub.features > li:last-child:nth-child(3n):not(.lead),
  .seo .hub.use-cases > li:last-child:nth-child(3n + 1) {
    flex-direction: row;
  }
  .seo .hub.features > .lead {
    grid-column: span 2;
  }
  .seo .hub.features > li:last-child:nth-child(3n):not(.lead),
  .seo .hub.use-cases > li:last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
  }
  .seo .hub.features > .lead > .thumb,
  .seo .hub.features > li:last-child:nth-child(3n):not(.lead) > .thumb {
    width: 60%;
    flex: none;
    /* NUT-153 vòng 2 (uma P1): giữ đúng 16:10, không kéo cao theo thẻ (object-fit cover từng cắt mất chữ của ảnh). */
    align-self: flex-start;
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
  .hub-body {
    justify-content: center;
  }
  .hub.features > .lead .hub-pain {
    font-size: 0.9rem;
  }
  .seo .hub.features > .lead :is(h2, h3) {
    font: 400 1.5rem/1.2 var(--display);
  }
}

/* ===== NUT-162: /features có clip và ảnh app thật (.jc-docs/design/NUT-162/design.md) =====
   Dải tính năng: chữ rồi vật chứng; từ 1024 px hai cột, xen kẽ bên. Clip = khung .frame.desktop + nút Pause/Play dưới khung. */
.seo > .lp-hero + .features {
  margin-top: var(--sp-12);
}

.features {
  display: grid;
  gap: var(--sp-12);
}

.feat {
  display: grid;
  gap: var(--sp-6);
  align-items: start;
}

.feat-copy {
  max-width: 68ch;
}

.feat-copy > * {
  margin: 0;
}

.seo .feat-copy > * + * {
  margin-top: var(--sp-4);
}

.seo .feat h2 {
  margin-top: 0;
}

.feat-media {
  min-width: 0;
}

.seo .feat-media > figure {
  margin: 0;
}

.seo .feat-media .shot.desktop {
  max-width: 34rem;
}

.seo .clip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  max-width: 26rem;
  margin: 0;
}

.lp-visual > .clip,
.feat-media .clip,
.feat-media .shot.desktop {
  margin-inline: auto;
}

.clip-frame {
  grid-column: 1 / -1;
}

.seo .clip-poster {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  margin: 0;
  border: 0;
  border-radius: 0;
}

/* Video nằm đè lên ảnh poster; trong suốt tới khi có khung hình đầu. */
.clip-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* NUT-153 vòng 4: video ẩn (hidden) tới khi tới khung kết quả hoặc khi play() bị từ chối. display: block ở trên đè [hidden],
   nên trước đây video vẫn hiện; dùng visibility để video vẫn chạy và phát timeupdate trong lúc poster hiện. */
.clip-video[hidden] {
  visibility: hidden;
}

/* Không JS: nút ẩn (hidden), chú thích chiếm cả hàng. */
.seo .clip > figcaption {
  grid-column: 2;
  margin: 0;
  color: var(--ink);
}

.seo .clip > .clip-toggle[hidden] + figcaption {
  grid-column: 1 / -1;
}

.clip-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 32px;
  padding: 0 var(--sp-3);
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r-control);
  font: 500 0.8rem/1 var(--mono);
  cursor: pointer;
}

.clip-toggle[hidden] {
  display: none;
}

.clip-toggle:hover {
  background: var(--paper-2);
}

.clip-toggle:focus-visible {
  outline: 3px solid var(--accent-text);
  outline-offset: 2px;
}

/* Biểu tượng: tam giác (Play) hoặc hai vạch (Pause), vẽ bằng viền nên không cần ảnh. */
.clip-icon {
  width: 0;
  height: 0;
  border-block: 5px solid transparent;
  border-left: 8px solid currentColor;
}

.clip-toggle[data-playing] .clip-icon {
  width: 8px;
  height: 10px;
  border: 0;
  border-inline: 3px solid currentColor;
}

/* H1 là câu giá trị dài hơn: rộng 20ch để ngắt "Log meals in chat." / "Remembite keeps the record." gọn. */
.seo .features-hero h1 {
  max-width: 20ch;
}

@media (min-width: 1024px) {
  .seo > .features-hero:not(.solo) {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  .seo .features-hero h1 {
    font-size: clamp(2rem, 1rem + 1.6vw, 2.5rem);
  }
}

/* Vòng 2 (uma P1): dưới 640 px clip hero đứng ngay sau H1, rồi nút, rồi đoạn mở đầu; nút Pause/Play và chú thích xếp chồng,
   chú thích tối thiểu 14 px. */
@media (max-width: 639px) {
  .seo > .features-hero {
    gap: var(--sp-4);
  }
  .features-hero > .lp-copy {
    display: contents;
  }
  .features-hero h1 {
    order: 1;
  }
  .features-hero > .lp-visual {
    order: 2;
    margin-top: var(--sp-2);
  }
  /* Clip hero nhỏ hơn một chút để nút vẫn nằm trong màn hình đầu ở 390 x 844. */
  .seo .features-hero .clip {
    max-width: 18rem;
  }
  .features-hero .cta-row {
    order: 3;
  }
  .features-hero .answer {
    order: 4;
  }
  .seo .clip {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-2);
  }
  .seo .clip > .clip-toggle {
    justify-self: start;
  }
  .seo .clip > figcaption,
  .seo .clip > .clip-toggle[hidden] + figcaption {
    grid-column: 1;
    font-size: 0.875rem;
  }
}

/* Thẻ trang con (khi có /features/<slug> đã tới ngày đăng). */
.seo > .feature-pages {
  margin-top: var(--sp-16);
}

.seo > .hub + .features {
  margin-top: var(--sp-16);
}

@media (min-width: 1024px) {
  .seo > .lp-hero + .features {
    margin-top: var(--sp-16);
  }
  .features {
    gap: var(--sp-16);
  }
  .feat:not(.solo) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-12);
    align-items: center;
  }
  .feat:not(.solo):nth-child(even) > .feat-media {
    order: -1;
  }
}

/* ===== NUT-171: template 2 cột cho trang nhiều chữ (seo/doc.ts, .jc-docs/design/NUT-171/design.md) =====
   >= 1024 px: bài trái (đoạn văn giữ --measure), cột phải rộng bằng khung clip trang chủ (26rem) và dính: mục lục, khung hình
   của đoạn đang đọc (rail.js), thẻ CTA. < 1024 px: một cột, cột phải ẩn, clip nằm trong luồng. Token có sẵn, thang 4 px. */
.doc-rail {
  display: none;
}

.seo > .meta + .doc,
.seo .start + .doc,
.seo .connect-top + .doc {
  margin-top: var(--sp-8);
}

/* Clip trong luồng (mobile, tablet): rộng tối đa bằng khung clip trang chủ, cách đoạn trước 24 px; trong bước của danh sách 12 px. */
.seo .doc .article > .clip {
  margin-top: var(--sp-6);
}

.seo .doc .article li > .clip {
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* NUT-161 vòng 3: link Changelog dưới câu mở của hub /guide. */
.seo > .hub-changelog {
  margin-top: var(--sp-3);
  font-weight: 500;
}

/* NUT-161 vòng 3 (uma P2): hình trong bước ở mobile rộng tối đa 20rem (khoảng 400 px cao thay vì 480), trang nhiều bước bớt dài. */
@media (max-width: 1023.98px) {
  .seo .doc .article li > .clip {
    max-width: 20rem;
  }
}

.seo .doc .article li > .clip > figcaption {
  font-size: 0.82rem;
}

/* Ảnh tĩnh cùng khung clip (không nút): chú thích chiếm cả hàng. */
.seo .clip.still > figcaption {
  grid-column: 1 / -1;
}

/* NUT-171 vòng 2 (uma P1): /connect dưới 1024 px chỉ giữ hình của các bước và mục đầu của danh sách "Five things to say";
   hình các mục sau của danh sách (thẻ tool tĩnh, History) chỉ hiện ở cột phải từ 1024 px. Trang bớt khoảng 2,000 px ở 390. */
@media (max-width: 1023.98px) {
  .seo .doc .article ul > li:not(:first-child) > .clip {
    display: none;
  }
  .connect-visual {
    display: none;
  }
}

/* /connect từ 1024 px: khối 3 bước cột trái (các bước xếp dọc), clip bữa đầu tiên cột phải, cùng lưới với cột phải bên dưới. */
@media (min-width: 1024px) {
  .connect-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(22rem, 30vw, 26rem);
    column-gap: var(--sp-12);
    align-items: start;
    margin-top: var(--sp-6);
  }
  .connect-top > .start {
    margin-top: 0;
  }
  .connect-top .start-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .connect-top .start-steps > li,
  .connect-top .start-steps > li + li {
    padding: 16px 0 16px 48px;
    border-top: 1px dashed var(--muted);
    border-left: 0;
  }
  .connect-top .start-steps > li:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .connect-top .start-steps > li::before,
  .connect-top .start-steps > li + li::before {
    left: 0;
    top: 16px;
  }
  .connect-top .start-steps > li:first-child::before {
    top: 0;
  }
  .seo .connect-visual .clip {
    width: min(100%, calc((100vh - 200px) * 0.8));
    max-width: none;
  }
}

/* WCAG 2.5.5 mục tiêu 44 px cho nút Pause/Play ở trang nội dung (brief NUT-171). */
.doc .clip-toggle {
  min-height: 44px;
}

@media (min-width: 1024px) {
  .doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(22rem, 30vw, 26rem);
    column-gap: var(--sp-12);
  }
  .doc > .article {
    grid-area: 1 / 1;
    align-self: start;
  }
  /* Cột phải kéo dài bằng bài để phần dính có chỗ trượt. */
  .doc-rail {
    grid-area: 1 / 2;
    display: block;
  }
  .rail-in {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    max-height: calc(100vh - 104px);
  }
  .doc:not(.tall) .rail-in > .toc {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Chừa chỗ cho vòng focus khỏi bị overflow cắt (như .toc-rail NUT-145). */
    padding: 12px 12px 12px 28px;
    margin: -12px;
  }
  .doc.tall .doc-rail > .toc {
    margin-bottom: var(--sp-8);
  }
  /* NUT-161: hub /guide đặt mục lục thu gọn trong <section> đầu, không phải con trực tiếp của .article. */
  .seo .doc .article .toc-m {
    display: none;
  }
  /* Bản trong luồng của clip: ẩn, bản trong khung hình thay nó (không JS: doc-nojs.css). */
  .seo .doc .article .in-flow {
    display: none;
  }
  /* NUT-169 bó sơ đồ 2/3 khung ở trang không mục lục; trong template này cột bài đã hẹp hơn nên hình rộng hết cột. */
  .seo .doc > .article > figure {
    max-width: none;
  }
  .rail-media {
    flex: 0 0 auto;
  }
  .rail-item[hidden] {
    display: none;
  }
  /* Clip 4:5: cao tối đa phần màn hình còn lại sau CTA (khoảng 180 px), để cả khung + chú thích + CTA vừa một màn hình. */
  .seo .rail-media .clip {
    width: min(100%, calc((100vh - 284px) * 0.8));
    max-width: none;
  }
  .seo .rail-media .clip > figcaption {
    font-size: 0.82rem;
  }
  .seo .rail-media .cover img {
    margin: 0;
    border: 2px solid var(--ink);
    border-radius: var(--r-frame);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .seo .rail-media .shot.phone .frame {
    max-width: 180px;
    margin-inline: 0;
  }
  .seo .rail-media .shot.phone > figcaption {
    margin-top: var(--sp-3);
    font-size: 0.82rem;
  }
  .rail-cta {
    flex: none;
    display: grid;
    gap: var(--sp-3);
    justify-items: start;
    padding-top: var(--sp-4);
    border-top: 1px dashed var(--muted);
  }
  .rail-cta p {
    font-size: 0.82rem;
    color: var(--muted);
  }
  /* Mục đang đọc (rail.js đặt aria-current): vạch cam bên trái như bước đang chọn ở How it works trang chủ. */
  .doc-rail .toc a[aria-current] {
    position: relative;
    font-weight: 500;
  }
  .doc-rail .toc a[aria-current]::after {
    content: "";
    position: absolute;
    left: -18px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: var(--label);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .rail-item.enter {
    animation: rail-in-fx 220ms ease-out;
  }
  @keyframes rail-in-fx {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

/* NUT-199: thêm vào cuối apps/web/seo.css. Chỉ dùng token sẵn có của seo.css, thang 4 px. */

/* Dòng "Using Claude instead?" / "Using ChatGPT?" ngay dưới H1 của /connect và /connect/chatgpt (render.ts dựng). */
.seo .switch-ai {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--sp-2);
  row-gap: var(--sp-1);
  width: fit-content;
  max-width: 100%;
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--card);
  border: 1px solid var(--rule);
  font-size: 0.95rem;
}

.seo .switch-ai span {
  color: var(--muted);
}

.seo .switch-ai a {
  display: inline-block;
  padding-block: var(--sp-1);
  color: var(--ink);
  font-weight: 500;
}

/* URL server và câu nói đầu tiên trong thân bài: cùng hình với khối 3 bước của /connect (.start-steps .url, .start-steps .say). */
.seo .article code.url {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow-x: auto;
  user-select: all;
}

@media (min-width: 600px) {
  .seo .article code.url {
    font-size: 0.95rem;
  }
}

/* Nhãn menu của ChatGPT trong các bước (<strong> trong ol.steps): khung như một nút để người đọc dò đúng chữ trên màn hình.
   ol.steps chưa trang nào khác dùng, nên quy ước "strong trong bước = nhãn giao diện" không đụng trang cũ. */
.seo .steps strong {
  /* inline-block: nhãn dài xuống dòng cả khối thay vì để "I" lẻ cuối dòng; quá rộng thì vẫn ngắt bên trong. */
  display: inline-block;
  max-width: 100%;
  padding: 0 var(--sp-1);
  background: var(--card);
  border: 1px solid var(--ink);
  border-radius: var(--r-control);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Dưới 360 px nhãn dài nhất ("I understand and want to continue") không vừa một dòng: để ngắt trong dòng, tránh dấu chấm mồ côi. */
@media (max-width: 359px) {
  .seo .steps strong {
    display: inline;
  }
}

.seo .article > .say {
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border-left: 4px solid var(--label);
  user-select: all;
}