:root {
  --font-sans: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-ja: "Noto Sans JP", "Noto Sans", system-ui, sans-serif;
  --ink: #12232f;
  --ink-soft: #526670;
  --surface: #f7f8f4;
  --surface-strong: #ffffff;
  --line: #dfe6e2;
  --accent: #176c67;
  --accent-dark: #105752;
  --accent-soft: #dcefeb;
  --purple: #4a355f;
  --shadow: 0 24px 70px rgb(24 55 58 / 13%);
  --container: 1180px;
  --header-height: 72px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
}

/* Phải nhắm cả body: `body { font-family: var(--font-sans) }` khai trực tiếp trên body nên
   nó thắng thừa kế từ html. Nếu chỉ đặt trên html:lang(ja) thì toàn bộ nội dung vẫn dùng
   Noto Sans, và Noto Sans JP không bao giờ được tải. Xem docs/i18n-plan.md §7.4. */
html:lang(ja),
html:lang(ja) body {
  font-family: var(--font-ja);
}

html:lang(ja) {
  line-height: 1.75;
  line-break: strict;
}

html:lang(ja) h1,
html:lang(ja) h2,
html:lang(ja) h3,
html:lang(ja) .eyebrow,
html:lang(ja) .plan-price {
  letter-spacing: normal;
}

html:lang(ja) .eyebrow {
  text-transform: none;
}

html:lang(ja) p,
html:lang(ja) li {
  overflow-wrap: anywhere;
}

/* Tiếng Nhật cho phép ngắt dòng giữa gần như mọi ký tự, nên tiêu đề dễ bị cắt giữa từ
   (đo được: `の翻訳量に合わ / せて選べます`, `始める前に知っ / ておきたいこと`).
   `word-break: auto-phrase` ngắt theo đơn vị ngữ và sửa được cả hai.
   Chỉ áp từ 360px: ở 320px mỗi dòng chỉ vừa ~10 ký tự nên đơn vị ngữ không lọt, và
   auto-phrase sinh dòng lẻ (đo được: tiêu đề How it works thành 4 dòng, dòng đầu chỉ `一度`).
   Trình duyệt không hỗ trợ thì bỏ qua thuộc tính này. Xem docs/i18n-plan.md §7.4. */
@media (min-width: 360px) {
  html:lang(ja) h1,
  html:lang(ja) h2,
  html:lang(ja) h3,
  html:lang(ja) .eyebrow {
    word-break: auto-phrase;
  }
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Không lock scroll nữa: mobile nav giờ là panel nổi, không đẩy nội dung, nên việc
   khoá scroll không còn cần thiết. Xem docs/i18n-plan.md §7.3. */

a {
  color: inherit;
}

button,
a,
summary {
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit;
}

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: #ffffff;
  background: var(--ink);
  border-radius: 8px;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  z-index: 100;
  top: 0;
  min-height: var(--header-height);
  background: rgb(247 248 244 / 88%);
  border-bottom: 1px solid rgb(223 230 226 / 85%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -0.02em;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #ffffff;
  background: linear-gradient(135deg, var(--purple), var(--accent));
}

.brand-mark {
  width: 38px;
  height: 38px;
  background: #173f4a;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
}

.brand-logo-image {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.brand-logo-image-dark {
  filter: none;
}

.brand-name {
  font-size: 1.1875rem;
}

.brand-name {
  font-size: 1.1875rem;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2vw, 32px);
  margin-left: auto;
}

.desktop-nav a {
  position: relative;
  padding-block: 23px;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 17px;
  left: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 999px;
  transform: scaleX(0);
  transition: transform 180ms ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible {
  color: var(--ink);
}

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after {
  transform: scaleX(1);
}

.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  color: #ffffff;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgb(23 108 103 / 18%);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  transform: translateY(-1px);
}

.button-secondary {
  gap: 9px;
  color: var(--ink);
  background: transparent;
  border-color: #afbfba;
  box-shadow: none;
}

.button-secondary:hover {
  color: var(--accent-dark);
  background: var(--surface-strong);
  border-color: var(--accent);
}

.button:focus-visible,
.brand:focus-visible,
.desktop-nav a:focus-visible,
.mobile-nav a:focus-visible,
.menu-button:focus-visible {
  outline: 3px solid rgb(23 108 103 / 32%);
  outline-offset: 3px;
}

.button-small {
  min-height: 42px;
  padding: 9px 16px;
  font-size: 0.875rem;
}

.menu-button {
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.menu-button span {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 180ms ease, opacity 180ms ease;
}

.menu-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.lang-switcher {
  flex: 0 0 auto;
}

/* Dropdown dựng trên <details>: mở/đóng được kể cả khi JavaScript không chạy.
   script.js chỉ thêm phần tiện dụng (đóng khi bấm ra ngoài, đóng bằng Escape). */
.lang-dropdown {
  position: relative;
  display: inline-block;
}

.lang-dropdown > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: color 160ms ease, background-color 160ms ease;
}

.lang-dropdown > summary::-webkit-details-marker {
  display: none;
}

.lang-dropdown > summary:hover,
.lang-dropdown[open] > summary {
  color: var(--accent);
  background: var(--accent-soft);
}

.lang-dropdown > summary:focus-visible {
  outline: 3px solid rgb(23 108 103 / 32%);
  outline-offset: 2px;
}

.lang-globe {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Trong header chỉ hiện icon. Nhãn chữ dành cho mobile nav, nơi dropdown là một
   hàng đầy chiều ngang và một icon đứng trơ sẽ khó nhận ra. */
.lang-label {
  display: none;
}

.lang-caret {
  width: 10px;
  height: 7px;
  flex: 0 0 auto;
  transition: transform 160ms ease;
}

.lang-dropdown[open] .lang-caret {
  transform: rotate(180deg);
}

.lang-menu {
  display: grid;
  gap: 2px;
  /* Vừa đúng nội dung: nhãn chỉ có 2–3 ký tự nên panel rộng chỉ tạo khoảng trống thừa. */
  min-width: 84px;
  padding: 5px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgb(24 55 58 / 14%);
}

.lang-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease, background-color 160ms ease;
}

.lang-menu a:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.lang-menu a[aria-current] {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-soft);
}

.lang-menu a:focus-visible {
  outline: 3px solid rgb(23 108 103 / 32%);
  outline-offset: -1px;
}

/* Trong header: panel nổi lên trên nội dung, không đẩy layout header. */
.header-inner .lang-menu {
  position: absolute;
  z-index: 10;
  right: 0;
  top: calc(100% + 8px);
}

/* Trong mobile nav: panel nằm trong luồng, dropdown trông như một hàng nav. */
.mobile-nav .lang-dropdown {
  display: block;
}

.mobile-nav .lang-dropdown:last-child > summary {
  border-bottom: 0;
}

.mobile-nav .lang-dropdown > summary {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  min-height: 48px;
  padding: 10px 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
}

.mobile-nav .lang-dropdown > summary:hover,
.mobile-nav .lang-dropdown[open] > summary {
  color: var(--accent);
  background: transparent;
}

.mobile-nav .lang-label {
  display: inline;
  margin-right: auto;
}

/* Panel co theo noi dung y nhu tren desktop: `.mobile-nav-inner` la grid nen mac dinh
   lang-menu se keo het chieu ngang, thua rat nhieu khoang trong voi nhan 2-3 ky tu. */
.mobile-nav .lang-menu {
  margin: 10px 0 4px;
  min-width: 84px;
  width: fit-content;
  justify-self: start;
}

/* Specificity bắt buộc phải cao hơn .mobile-nav a:not(.button) — rule đó nằm sau
   trong file và sẽ thắng nếu chỉ dùng .mobile-nav .lang-menu a. */
.mobile-nav .lang-menu a:not(.button) {
  min-height: 48px;
  min-width: 72px;
  padding: 9px 14px;
  justify-content: center;
  border-bottom: 0;
  color: var(--ink);
  font-weight: 600;
}

.mobile-nav .lang-menu a[aria-current]:not(.button) {
  color: var(--accent);
  font-weight: 700;
  background: var(--accent-soft);
}

.mobile-nav .lang-menu a:not(.button):hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Panel nổi, neo vào góc phải dưới header. Trước đây panel nằm TRONG LUỒNG và đẩy toàn
   bộ nội dung trang xuống 389px trong một frame — đó là nguyên nhân của cả cảm giác
   "giật/chớp" lẫn việc nội dung bị đẩy xuống. Xem docs/i18n-plan.md §7.3. */
.mobile-nav {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: max(16px, calc((100% - var(--container)) / 2 + 16px));
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - var(--header-height) - 24px);
  overflow-y: auto;
  padding-inline: 18px;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 22px 54px rgb(24 55 58 / 16%);
  opacity: 0;
  transform: translateY(-8px) scale(0.985);
  transform-origin: top right;
  transition: opacity 170ms ease-out, transform 170ms ease-out;
}

/* `hidden` vẫn được giữ để phần tử không nằm trong tab order khi đóng và để trạng thái
   mặc định khi không có JavaScript là đóng. Vì `display: none` chặn transition,
   script.js bỏ `hidden` trước rồi mới thêm `.is-open` ở frame sau. */
.mobile-nav[hidden] {
  display: none;
}

.mobile-nav.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.mobile-nav-inner {
  display: grid;
  padding-block: 6px 18px;
}

.mobile-nav a:not(.button) {
  min-height: 48px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(58px, 8vw, 112px) clamp(70px, 9vw, 124px);
}

.hero::before {
  content: "";
  position: absolute;
  top: -240px;
  left: -180px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgb(220 239 235 / 80%) 0, rgb(220 239 235 / 0%) 70%);
  pointer-events: none;
}

.hero-layout {
  position: relative;
}

.hero-copy {
  max-width: 850px;
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

h1 {
  max-width: 900px;
  margin: 0 auto;
  /* Giảm 2 bậc so với bản đầu (74px). Ở 74px, tiêu đề hero tiếng Anh không vừa
     max-width 900px nên bị tách thành 3 dòng với một dòng chỉ có 2 chữ. Ở 58px,
     cả EN và VI đều ra đúng 2 dòng theo cấu trúc câu. Xem docs/i18n-plan.md §7.2. */
  font-size: clamp(2.125rem, 4.4vw, 3.625rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.hero-description {
  max-width: 720px;
  margin: 26px auto 0;
  color: var(--ink-soft);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 32px;
}

.hero-note {
  margin: 16px auto 0;
  color: var(--ink-soft);
  font-size: 0.8125rem;
}

.product-visual {
  position: relative;
  width: min(100%, 1120px);
  margin: clamp(50px, 6vw, 76px) auto 0;
}

.product-screenshot {
  width: 100%;
  height: auto;
  display: block;
  background: #ffffff;
  border: 1px solid rgb(208 220 215 / 90%);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.highlights {
  padding-bottom: clamp(62px, 7vw, 96px);
  background: var(--surface);
}

.highlight-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.highlight-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 18px;
  color: var(--ink-soft);
  background: rgb(255 255 255 / 72%);
  border: 1px solid #e2e9e5;
  border-radius: 13px;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: left;
}

/* Flex item mặc định có min-width:auto nên không co được dưới kích thước nội dung; nếu
   trong đó có chuỗi không ngắt được thì chữ tràn ra ngoài card. Đo được: bản EN tràn tới
   79px ở dải 681–1030px. Xem docs/i18n-plan.md §7.5. */
.highlight-item > span:not(.highlight-icon) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.highlight-icon {
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
}

.how-it-works {
  padding-block: clamp(78px, 9vw, 126px);
  background: #f1f5f2;
}

.section-heading {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.section-heading .eyebrow {
  margin-bottom: 14px;
}

h2 {
  margin: 0;
  color: var(--ink);
  /* Giảm cùng tỉ lệ với h1 để giữ nguyên tương quan thang chữ. */
  font-size: clamp(1.75rem, 3.3vw, 2.625rem);
  line-height: 1.16;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.section-heading > p:last-child {
  max-width: 650px;
  margin: 20px auto 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.how-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(360px, 0.84fr);
  align-items: stretch;
  gap: clamp(22px, 3vw, 34px);
  margin-top: clamp(44px, 5vw, 64px);
}

.how-visual {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #d9e3de;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgb(24 55 58 / 9%);
}

.how-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 67% center;
}

.steps-list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-card {
  min-width: 0;
  padding: 24px;
  background: var(--surface-strong);
  border: 1px solid #d9e3de;
  border-radius: 16px;
  box-shadow: 0 14px 36px rgb(24 55 58 / 6%);
}

.step-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.step-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #ffffff;
  background: var(--accent);
  border-radius: 50%;
  font-size: 0.875rem;
  font-weight: 700;
}

.step-icon {
  width: 52px;
  height: 52px;
  fill: none;
  stroke: #315d5b;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.step-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.step-card p {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.step-card strong {
  color: var(--ink);
}

.advanced-note {
  max-width: 900px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 28px auto 0;
  padding: 22px 26px;
  color: var(--ink-soft);
  background: #e4efeb;
  border: 1px solid #cadfd7;
  border-radius: 14px;
}

.advanced-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--accent-dark);
  background: #ffffff;
  border-radius: 10px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.advanced-note strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}

.advanced-note p {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.65;
}

.features {
  padding-block: clamp(78px, 9vw, 126px);
  background: var(--surface);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
  margin-top: clamp(42px, 5vw, 62px);
}

.feature-card {
  min-width: 0;
  padding: clamp(24px, 3vw, 32px);
  background: var(--surface-strong);
  border: 1px solid #dce5e0;
  border-radius: 16px;
  box-shadow: 0 14px 38px rgb(24 55 58 / 6%);
}

.feature-card-topline {
  min-height: 54px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.feature-label {
  display: inline-flex;
  padding: 6px 10px;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.45;
}

.feature-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  fill: none;
  stroke: #315d5b;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.feature-card p {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.privacy-overview {
  padding-block: clamp(64px, 7vw, 92px);
  background: #eaf1ee;
}

.pricing {
  padding-block: clamp(78px, 9vw, 126px);
  background: #f1f5f2;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  align-items: stretch;
  gap: 16px;
  margin-top: clamp(42px, 5vw, 62px);
}

.pricing-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.5vw, 30px);
  background: var(--surface-strong);
  border: 1px solid #d8e2dd;
  border-radius: 16px;
  box-shadow: 0 14px 38px rgb(24 55 58 / 6%);
}

.pricing-card-header {
  min-height: 116px;
}

.pricing-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 1.5625rem;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.pricing-card-header p {
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.65;
}

.plan-price {
  min-height: 68px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0 0;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.plan-price span {
  color: var(--ink);
  font-size: clamp(2.125rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.plan-price small {
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 500;
}

.plan-price-from small:first-child {
  width: 100%;
  margin-bottom: 2px;
}

.plan-features {
  display: grid;
  gap: 13px;
  margin: 24px 0 28px;
  padding: 0;
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.6;
  list-style: none;
}

.plan-features li {
  position: relative;
  padding-left: 24px;
}

.plan-features li::before {
  content: "✓";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

.plan-features strong {
  color: var(--ink);
  font-weight: 600;
}

.pricing-cta {
  width: 100%;
  margin-top: auto;
}

.privacy-summary {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  align-items: end;
  gap: clamp(40px, 7vw, 88px);
}

.privacy-summary h2 {
  max-width: 540px;
  /* Biến thể nhỏ hơn của h2, giảm cùng tỉ lệ để vẫn nhỏ hơn h2 gốc (42px). */
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
}

.privacy-copy {
  max-width: 610px;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}

.faq {
  padding-block: clamp(78px, 9vw, 126px);
  background: var(--surface);
}

.faq-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: clamp(48px, 8vw, 104px);
}

.faq-intro {
  position: sticky;
  top: calc(var(--header-height) + 42px);
}

.faq-intro > p:last-child {
  max-width: 500px;
  margin: 22px 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.75;
}

.faq-list {
  border-top: 1px solid var(--line);
  overflow-anchor: none;
}

.faq-list details {
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.faq-list details.is-animating {
  transition: height 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-list summary {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 4px;
  color: var(--ink);
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--accent-dark);
  background: var(--accent-soft);
  border-radius: 9px;
  font-size: 1.375rem;
  font-weight: 500;
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-list details.is-collapsing summary::after {
  transform: rotate(0);
}

.faq-list details p {
  margin: -4px 52px 24px 4px;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.js .faq-list details p {
  opacity: 0;
  transform: translateY(-5px);
  transition:
    opacity 260ms ease 80ms,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1) 40ms;
}

.js .faq-list details.is-expanded p {
  opacity: 1;
  transform: translateY(0);
}

.js .faq-list details.is-collapsing p {
  transition-delay: 0ms;
}

.faq-list summary:focus-visible {
  outline: 3px solid rgb(23 108 103 / 32%);
  outline-offset: 4px;
  border-radius: 8px;
}

.site-footer {
  padding-block: 62px 24px;
  color: rgb(255 255 255 / 72%);
  background: #102b34;
}

.footer-disclaimer {
  padding-bottom: 28px;
  font-size: 0.875rem;
  line-height: 1.65;
}

.footer-disclaimer p {
  max-width: 72ch;
  margin: 0;
}

.footer-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(140px, 0.55fr));
  gap: clamp(30px, 5vw, 64px);
}

.brand-on-dark {
  color: #ffffff;
}

.footer-brand p {
  max-width: 360px;
  margin: 18px 0 0;
  font-size: 0.875rem;
  line-height: 1.7;
}

.footer-nav {
  display: grid;
  align-content: start;
  gap: 12px;
}

.footer-nav h2 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.footer-nav a {
  color: rgb(255 255 255 / 72%);
  font-size: 0.875rem;
  text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: #ffffff;
}

.footer-nav a:focus-visible,
.brand-on-dark:focus-visible {
  outline-color: rgb(220 239 235 / 65%);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 13%);
  font-size: 0.75rem;
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 1060px) {
  :root {
    --header-height: 66px;
  }

  .desktop-nav {
    display: none;
  }

  .header-inner {
    min-height: var(--header-height);
  }

  .header-cta {
    margin-left: auto;
  }

  .header-inner > .lang-switcher {
    display: none;
  }

  .menu-button {
    display: inline-flex;
  }
}

@media (max-width: 900px) {
  .hero-copy {
    max-width: 760px;
  }

  .how-layout {
    grid-template-columns: 1fr;
  }

  .privacy-summary {
    grid-template-columns: 1fr;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-intro {
    position: static;
  }

  .how-visual {
    aspect-ratio: 16 / 9;
  }

  .step-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    column-gap: 22px;
  }

  .step-topline {
    grid-row: 1 / span 2;
    align-items: flex-start;
    margin: 0;
  }

  .step-card h3 {
    align-self: end;
  }

  .footer-layout {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(100% - 28px, var(--container));
  }

  .hero {
    padding-block: 48px 70px;
  }

  h1 {
    /* Giảm cùng tỉ lệ với rule h1 gốc. Ở 54px, tiêu đề hero tiếng Anh tại 320px bị
       tách thành 5 dòng với một dòng chỉ có chữ "each". */
    font-size: clamp(2rem, 9.2vw, 2.75rem);
  }

  .hero-description {
    margin-top: 20px;
    font-size: 1.0625rem;
  }

  .hero-actions {
    margin-top: 26px;
  }

  .product-screenshot {
    height: clamp(270px, 76vw, 320px);
    object-fit: cover;
    object-position: 68% center;
  }

  .highlight-list {
    grid-template-columns: 1fr 1fr;
  }

  .highlight-item {
    min-height: 72px;
    justify-content: flex-start;
    text-align: left;
  }

  .how-it-works {
    padding-block: 68px 76px;
  }

  .features {
    padding-block: 68px 76px;
  }

  .pricing {
    padding-block: 68px 76px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .privacy-overview {
    padding-block: 68px 76px;
  }

  .faq {
    padding-block: 68px 76px;
  }

  .section-heading {
    text-align: left;
  }

  .section-heading .eyebrow,
  .section-heading > p:last-child {
    margin-left: 0;
  }

  .steps-list {
    margin-top: 0;
  }

  .how-visual {
    aspect-ratio: 4 / 3;
  }

  .step-card {
    display: block;
    padding: 24px;
  }

  .step-topline {
    align-items: center;
    margin-bottom: 22px;
  }

  .advanced-note {
    padding: 20px;
  }

}

@media (max-width: 430px) {
  .brand-name {
    font-size: 1rem;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .brand-logo-image {
    width: 34px;
    height: 34px;
  }

  .header-inner {
    gap: 8px;
  }

  .brand {
    gap: 8px;
  }

  .header-cta {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 0.8125rem;
  }

  .hero-actions {
    flex-wrap: nowrap;
    gap: 8px;
  }

  .hero-actions .button {
    padding-inline: 10px;
    font-size: 0.875rem;
  }

  .highlight-list {
    grid-template-columns: 1fr;
    padding-block: 8px;
  }

  .highlight-item {
    min-height: 60px;
  }

  .advanced-note {
    display: block;
  }

  .advanced-icon {
    margin-bottom: 14px;
  }

  .feature-card-topline {
    margin-bottom: 22px;
  }

  .pricing-card-header,
  .plan-price {
    min-height: 0;
  }

  .faq-list summary {
    min-height: 70px;
    gap: 16px;
    font-size: 1rem;
  }

  .faq-list details p {
    margin-right: 4px;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

}

@media (max-width: 350px) {
  .footer-layout {
    grid-template-columns: 1fr;
  }
}

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

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .js .faq-list details[open] p {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   Trang nội dung độc lập — gộp từ inline <style> của từng trang phụ.
   Xem docs/i18n-plan.md §7.1. KHÔNG nhân bản khối này trở lại vào HTML:
   mỗi ngôn ngữ dùng chung đúng một bản ở đây.
   ========================================================================== */

.page-content {
  padding: 120px 0 80px;
  max-width: 800px;
  margin: 0 auto;
}

/* --- privacy.html, terms.html, refund.html --------------------------------- */

.page-legal h1 {
  margin-bottom: 8px;
  font-size: clamp(2rem, 7vw, 2.5rem);
  line-height: 1.15;
}

.page-legal .policy-updated {
  margin: 0 0 20px;
  font-size: 0.95rem;
}

.page-legal p,
.page-legal li {
  line-height: 1.7;
  color: var(--ink-soft);
}

.page-legal p {
  margin-bottom: 16px;
}

.page-legal h2 {
  margin-top: 40px;
  margin-bottom: 16px;
  font-size: clamp(1.35rem, 5vw, 1.65rem);
  line-height: 1.3;
}

.page-legal h3 {
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: 1.1rem;
}

@media (max-width: 350px) {
  html:lang(ja) .page-legal h2 {
    font-size: 1.25rem;
  }
}

.page-legal ul {
  margin: 0 0 20px;
  padding-left: 24px;
}

.page-legal li + li {
  margin-top: 8px;
}

.page-legal a {
  overflow-wrap: anywhere;
  text-underline-offset: 0.15em;
}

.policy-summary {
  margin: 0 0 24px;
}

.policy-summary p {
  line-height: 1.6;
}

.policy-summary p:last-child {
  margin-bottom: 0;
}

/* --- support.html ---------------------------------------------------------- */

.page-support h1 {
  margin-bottom: 24px;
  font-size: 2.5rem;
}

.page-support p {
  margin-bottom: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.page-support h2 {
  margin-top: 32px;
  margin-bottom: 16px;
}

.support-links {
  margin: 24px 0 0;
  padding-left: 20px;
}

.support-links li + li {
  margin-top: 10px;
}

.support-links a {
  color: var(--accent);
  font-weight: 600;
  /* URL dài (feedback form) không có chỗ ngắt dòng tự nhiên và sẽ tràn ngang ở 320px.
     AGENTS.md §4 cấm page-level horizontal scroll. Giống .page-legal a. */
  overflow-wrap: anywhere;
}

/* --- getting-started.html -------------------------------------------------- */

.getting-started-hero {
  padding: 148px 0 72px;
  text-align: center;
  background: linear-gradient(180deg, #f8fbf9 0%, #f1f5f2 100%);
}

.getting-started-hero .eyebrow {
  margin-bottom: 14px;
}

.getting-started-hero h1 {
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink);
  font-size: clamp(2rem, 5vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.getting-started-hero p:not(.eyebrow) {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.7;
}

.getting-started-hero .button {
  margin-top: 30px;
}

.getting-started-steps {
  padding: clamp(64px, 9vw, 112px) 0;
}

.getting-started-steps > .container {
  max-width: 1080px;
}

.getting-started-step {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(280px, 0.84fr);
  align-items: center;
  gap: clamp(30px, 7vw, 88px);
}

.getting-started-step + .getting-started-step {
  margin-top: clamp(72px, 11vw, 132px);
}

.getting-started-step:nth-child(even) .step-visual {
  order: 2;
}

.step-visual {
  margin: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9e3de;
  border-radius: 18px;
  box-shadow: 0 22px 58px rgb(24 55 58 / 10%);
}

.step-visual img {
  width: 100%;
  height: auto;
  display: block;
}

.step-copy {
  min-width: 0;
}

.step-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: #315d5b;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Scope bắt buộc: .step-number cũng được dùng trên landing page với kích thước
   khác (34px, display grid). Selector phải cụ thể hơn để không đổi landing. */
.step-kicker .step-number {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: var(--accent);
  border-radius: 50%;
  font-size: 0.875rem;
  letter-spacing: 0;
}

.step-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.step-copy p:not(.step-kicker) {
  margin: 18px 0 0;
  color: var(--ink-soft);
  line-height: 1.75;
}

.step-copy code {
  padding: 0.12em 0.38em;
  color: var(--ink);
  background: #e4efeb;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
}

.getting-started-support {
  padding: 0 0 clamp(72px, 10vw, 120px);
}

.support-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(28px, 5vw, 44px);
  background: #ffffff;
  border: 1px solid #dfe6e2;
  border-radius: 18px;
  box-shadow: 0 12px 36px rgb(24 55 58 / 6%);
}

.support-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.support-panel p {
  max-width: 560px;
  margin: 10px 0 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

.support-panel .button {
  flex: 0 0 auto;
}

.support-panel .button-secondary {
  color: #105752;
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 12px;
  box-shadow: none;
  font-weight: 700;
}

.support-panel .button-secondary:hover {
  color: #0b3d39;
  background: #cce7e1;
  border-color: transparent;
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .getting-started-hero {
    padding-top: 122px;
    padding-bottom: 58px;
  }

  .getting-started-step {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .getting-started-step:nth-child(even) .step-visual {
    order: initial;
  }

  .getting-started-step + .getting-started-step {
    margin-top: 72px;
  }

  .support-panel {
    display: block;
  }

  .support-panel .button {
    margin-top: 24px;
  }
}

@media (max-width: 480px) {
  .page-legal {
    padding-top: 104px;
  }
}

/* Ghi chú bản kiểm soát pháp lý — xem docs/i18n-plan.md §4.6 (quyết định D4). */
.policy-language-note {
  margin: 0 0 24px;
  padding: 12px 14px;
  background: var(--accent-soft);
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.6;
}

.page-legal .policy-language-note {
  color: var(--ink);
}

/* Giữ từ ghép hai ngôn ngữ không bị ngắt giữa dấu gạch/dấu mũi tên. `text-wrap: balance`
   coi dấu – và ⇄ là điểm ngắt hợp lệ và sẽ chọn đúng chỗ đó vì nó cho hai dòng đều nhau
   nhất, tạo ra "Vietnamese–" / "Japanese". Xem docs/i18n-plan.md §7.2. */
.nowrap {
  white-space: nowrap;
}

/* Ở mobile hẹp, ưu tiên reflow cho copy dài. Header vẫn giữ một hàng ngang: các control đã được
   thu gọn ở breakpoint 430px và vẫn giữ target chạm tối thiểu cho nút menu. */
@media (max-width: 430px) {
  .nowrap {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  h1,
  h2 {
    overflow-wrap: anywhere;
    text-wrap: wrap;
  }
}

/* Link nằm trong văn bản phải nhận ra được là link. `a { color: inherit }` ở đầu file
   làm link thừa hưởng màu chữ xung quanh nên gần như không phân biệt được — chỉ còn
   gạch chân mặc định. Rule này áp dụng đồng bộ cho mọi link trong <p> và <li> của
   phần nội dung, ở cả ba ngôn ngữ: link trong card Enterprise, trong section Privacy,
   trong trang pháp lý và trong trang Support. Nút bấm được loại trừ. */
main :is(p, li) a:not(.button) {
  color: var(--accent);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 160ms ease, text-decoration-thickness 120ms ease;
}

main :is(p, li) a:not(.button):hover {
  color: var(--accent-dark);
  text-decoration-thickness: 2px;
}

/* Double-click vào một control sẽ khiến trình duyệt bôi đen chữ trong đó — đây là hành vi
   mặc định của trình duyệt, không phải lỗi của site, nhưng trên một control thì nó chỉ
   gây nhiễu. Tắt cho đúng phần chrome tương tác, KHÔNG tắt cho nội dung trang. */
.lang-dropdown > summary,
.lang-menu a,
.menu-button,
.desktop-nav a,
.mobile-nav a {
  -webkit-user-select: none;
  user-select: none;
}

/* Tôn trọng prefers-reduced-motion: bỏ hẳn chuyển động, chỉ đổi độ mờ. */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav {
    transform: none;
    transition: opacity 1ms linear;
  }

  .mobile-nav.is-open {
    transform: none;
  }
}