/* ═══════════════════════════════════════════════════════════════════════════
   FONT TỰ CHỦ — trang này KHÔNG gọi Google Fonts.
   Ba trang pháp lý dùng chung file này đều cam kết Verdant không gửi dữ liệu
   cá nhân cho bên thứ ba ngoài danh sách đã khai. Một thẻ <link> trỏ tới
   fonts.gstatic.com khiến MỌI lượt xem trang gửi địa chỉ IP người đọc sang
   Google — tức chính trang cam kết lại tự phá cam kết đó, và đó là thứ người
   duyệt store lẫn cơ quan quản lý đều soi. Tự chủ thì không có lượt gửi nào.
   File sinh từ chính .ttf app đang dùng: npm run web:fonts
   ═══════════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Be Vietnam Pro';src:url('fonts/bvp-200.woff2') format('woff2');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('fonts/bvp-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Be Vietnam Pro';src:url('fonts/bvp-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Noto Serif Display';src:url('fonts/nsd-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ═══════════════════════════════════════════════════════════════════════════
   Verdant — landing page
   Token màu/chữ lấy ĐÚNG từ src/constants/theme.ts của app. Trang web và app
   phải trông như một sản phẩm; lệch một tông là người dùng tải app về thấy lạ.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bright-green: #9fe870;
  --bright-green-hover: #8fdc5f;
  --forest: #163300;
  --forest-deep: #081500;
  --ink: #0e0f0c;
  --muted: #5c5f58;
  --tertiary: #868685;
  --cloud: #f7f7f5;
  --white: #ffffff;
  --neutral: #ececea;
  --mint: #dff5ce;
  --sage: #dcf5c8;
  --border: #dddddd;
  --positive: #1f8a3b;
  --danger: #c0392b;

  --sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Noto Serif Display', Georgia, 'Times New Roman', serif;

  --page: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* THỞ RỘNG — cùng thang spacing của app, nghiêng về phía rộng. */
  --s-xs: 4px;
  --s-sm: 8px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 112px;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 200;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ─── Chuỗi dài không ngắt được ──────────────────────────────────────────
   Đây là nguyên nhân tràn ngang phổ biến nhất, và nó tràn ÍT nên rất dễ bỏ
   qua: đo 21/09 thấy 4–32px ở các bề rộng 320 và 1024, do đúng một chuỗi —
   `nguyenhuutrong2901@gmail.com` (28 ký tự, không có chỗ nào để ngắt).

   `break-word` chứ KHÔNG `anywhere` cho chữ chạy: `anywhere` ngắt cả từ tiếng
   Việt bình thường giữa dòng, đọc rất khó. `break-word` chỉ ngắt khi một từ
   đứng một mình cũng đã vượt khung — tức đúng ca cần ngắt.
   Riêng `a` và `code` thì `anywhere`, vì email và mã phiên bản không phải chữ
   để đọc liền mạch. */
body { overflow-wrap: break-word; }
a, code { overflow-wrap: anywhere; }
a { color: var(--forest); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--s-lg);
}

/* ─── Chữ ──────────────────────────────────────────────────────────────── */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; }
h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.06; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--s-md); }
h3 { font-size: 1.3rem; line-height: 1.25; margin: 0 0 var(--s-sm); }
p { margin: 0 0 var(--s-md); }
strong, b { font-weight: 400; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 62ch; }
.eyebrow {
  font-size: 0.78rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--forest); margin: 0 0 var(--s-md);
}
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ─── Nút — bo pill, bóng gần phẳng, press feedback nảy ────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm);
  min-height: 56px; padding: 0 var(--s-xl);
  border: 0; border-radius: var(--radius-pill);
  font-family: var(--sans); font-size: 16px; font-weight: 400;
  cursor: pointer; text-decoration: none;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.18s, box-shadow 0.18s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--bright-green); color: var(--forest); box-shadow: 0 1px 2px rgba(22, 51, 0, 0.12); }
.btn-primary:hover { background: var(--bright-green-hover); box-shadow: 0 4px 14px rgba(22, 51, 0, 0.14); }
.btn-ghost { background: transparent; color: var(--forest); box-shadow: inset 0 0 0 1.5px var(--forest); }
.btn-ghost:hover { background: var(--mint); }
.btn-on-dark { background: var(--bright-green); color: var(--forest); }
.btn-row { display: flex; flex-wrap: wrap; gap: 20px; margin-top: var(--s-xl); }

/* ─── Thanh điều hướng ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.nav.stuck { border-bottom-color: var(--border); box-shadow: 0 1px 12px rgba(0, 0, 0, 0.03); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); height: 76px; }
.nav-logo { display: flex; align-items: center; }
.nav-logo svg, .nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--s-xl); }
.nav-links a { font-size: 15px; color: var(--muted); }
.nav-links a:hover { color: var(--forest); text-decoration: none; }
.nav .btn { min-height: 44px; padding: 0 var(--s-lg); font-size: 15px; }
@media (max-width: 860px) { .nav-links { display: none; } }
/* Nút CTA trên nav xuống hai dòng ở máy hẹp thì nó đội thanh nav cao gần gấp
   đôi và đẩy logo lệch. Ẩn nó đi — CTA cuối trang và CTA trong hero đã lo, và
   ở bề rộng đó thì cả hai đều cách người dùng một cú cuộn. */
@media (max-width: 560px) { .nav .btn { display: none; } }

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(168deg, var(--forest) 0%, var(--forest-deep) 100%);
  color: var(--white);
  padding: clamp(64px, 9vw, 120px) 0 var(--s-section);
}
.hero h1 { color: var(--white); }
.hero .lead { color: rgba(255, 255, 255, 0.76); }
.hero .eyebrow { color: var(--bright-green); }
.hero-grid { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: var(--s-xxl); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: var(--s-xl); } }
.hero-accent { color: var(--bright-green); }

/* Vệt sáng nền — thuần CSS, không ảnh, nên không tốn một byte tải thêm. */
.hero::before,
.hero::after {
  content: ''; position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(80px); opacity: 0.32;
}
.hero::before { width: 620px; height: 620px; background: var(--bright-green); top: -260px; right: -180px; }
.hero::after { width: 460px; height: 460px; background: #2f6b12; bottom: -240px; left: -160px; opacity: 0.4; }
.hero .wrap { position: relative; z-index: 1; }

/* Thẻ Net Worth giả lập — cho thấy sản phẩm chứ không chỉ nói về nó. */
.nw-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-xl);
  padding: var(--s-xl);
  backdrop-filter: blur(8px);
}
.nw-label { font-size: 14px; color: rgba(255, 255, 255, 0.62); margin: 0; }
.nw-value {
  font-family: var(--serif); font-size: clamp(2.1rem, 4.6vw, 3rem); line-height: 1.1;
  margin: var(--s-xs) 0 var(--s-sm); color: var(--white);
}
.nw-delta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--bright-green); }
.nw-spark { margin-top: var(--s-lg); }
.nw-spark svg { width: 100%; height: 88px; overflow: visible; }
.spark-line { fill: none; stroke: var(--bright-green); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.nw-rows { margin-top: var(--s-lg); border-top: 1px solid rgba(255, 255, 255, 0.12); }
.nw-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-md);
  padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nw-row:last-child { border-bottom: 0; padding-bottom: 0; }
.nw-row span:first-child { font-size: 14px; color: rgba(255, 255, 255, 0.62); flex: 1; }
.nw-row span:last-child { font-size: 15px; color: var(--white); flex-shrink: 0; }

/* ─── Khối section ─────────────────────────────────────────────────────── */
section { padding: var(--s-section) 0; }

/* Thanh nav DÍNH cao 76px, nên bấm một link neo là đỉnh khu chạy xuống DƯỚI
   thanh nav và tiêu đề khu bị che. `scroll-margin-top` chừa đúng chỗ đó.
   Áp cho cả `article` của văn bản pháp lý: mục lục ở đầu trang cũng là link
   neo, và ở đó tiêu đề điều bị che thì người đọc tưởng bấm không ăn. */
section[id], article[id] { scroll-margin-top: 96px; }
section.tight { padding: calc(var(--s-section) * 0.62) 0; }
.bg-cloud { background: var(--cloud); }
.bg-mint { background: var(--mint); }
.bg-dark { background: var(--forest); color: var(--white); }
.bg-dark h2, .bg-dark h3 { color: var(--white); }
.bg-dark .lead { color: rgba(255, 255, 255, 0.72); }
.bg-dark .eyebrow { color: var(--bright-green); }
.section-head { max-width: 68ch; margin-bottom: var(--s-xxl); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ─── Lưới thẻ ─────────────────────────────────────────────────────────── */
/* ⚠️ `min-width: 0` cho MỌI con của lưới. Mặc định grid item là `auto`, nên
   một đứa con rộng hơn ô (ảnh có `max-width` tính bằng px, chuỗi số dài không
   ngắt được, bảng) KÉO cả cột giãn ra rồi tràn khỏi trang. Ở 320px đã dính
   đúng vậy: một ảnh khai `max-width: 300px` trong ô rộng 272px làm cả trang
   scroll ngang 4px. Bốn pixel thì không ai kêu, nhưng nó là cùng một lỗi với
   bốn trăm pixel. */
.grid > *, .hero-grid > *, .foot-grid > * { min-width: 0; }

/* Ảnh minh hoạ giới hạn 300px NHƯNG không bao giờ vượt khung chứa. Khai
   `max-width: 300px` trần là nó ĐÈ `max-width: 100%` của reset — inline hay
   khai sau đều thắng — và đúng đó là cách sinh ra lỗi tràn ở trên. */
.art-300 { width: 300px; max-width: 100%; margin: 0 auto; }

.grid { display: grid; gap: var(--s-lg); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s-lg);
}
.card.on-cloud { border-color: var(--border); }
.card-dark {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius-lg);
  padding: var(--s-lg);
}
.card p:last-child, .card-dark p:last-child { margin-bottom: 0; }
.card-img { width: 84px; height: 84px; object-fit: contain; margin-bottom: var(--s-md); }

/* ─── Điểm đau: hai vế Excel ↔ Verdant ────────────────────────────────── */
.pain { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.pain > div { padding: var(--s-lg); }
.pain-a { background: var(--cloud); border-right: 1px solid var(--border); }
.pain-b { background: var(--white); }
@media (max-width: 680px) { .pain { grid-template-columns: 1fr; } .pain-a { border-right: 0; border-bottom: 1px solid var(--border); } }
.pain-tag { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 var(--s-sm); }
.pain-a .pain-tag { color: var(--tertiary); }
.pain-b .pain-tag { color: var(--forest); }
.pain-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-lg); }

/* ─── Số liệu đếm tăng dần ─────────────────────────────────────────────── */
.stat { text-align: center; }
.stat-value { font-family: var(--serif); font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1; color: var(--forest); }
.bg-dark .stat-value { color: var(--bright-green); }
.stat-label { font-size: 14px; color: var(--muted); margin-top: var(--s-sm); }
.bg-dark .stat-label { color: rgba(255, 255, 255, 0.66); }

/* ─── Vòng điểm sức khoẻ ───────────────────────────────────────────────── */
.score-ring { display: grid; place-items: center; position: relative; width: 190px; height: 190px; }
.score-ring svg { transform: rotate(-90deg); width: 190px; height: 190px; }
.score-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.14); stroke-width: 14; }
.score-ring-arc { fill: none; stroke-width: 14; stroke-linecap: round; stroke-dasharray: 471; }
.score-ring-num { position: absolute; font-family: var(--serif); font-size: 3rem; color: var(--white); line-height: 1; }
.pillar { display: flex; align-items: flex-start; gap: var(--s-md); }
.pillar img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.pillar-bar { height: 8px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.14); margin-top: 10px; overflow: hidden; }
.pillar-bar > i { display: block; height: 100%; width: 0; border-radius: var(--radius-pill); background: var(--bright-green); transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1); }

/* ─── Bảo mật ──────────────────────────────────────────────────────────── */
.shield-list { display: grid; gap: var(--s-lg); margin: 0; padding: 0; list-style: none; }
.shield-list li { display: flex; gap: var(--s-md); align-items: flex-start; }
.shield-tick {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--bright-green); color: var(--forest);
  display: grid; place-items: center; font-size: 14px; margin-top: 2px;
}
.no-list li .shield-tick { background: var(--neutral); color: var(--muted); }

/* ─── FAQ ──────────────────────────────────────────────────────────────── */
details.faq {
  border-bottom: 1px solid var(--border);
  padding: var(--s-lg) 0;
}
details.faq summary {
  cursor: pointer; list-style: none; font-size: 1.1rem;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-md);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font-size: 1.5rem; color: var(--forest); flex-shrink: 0; line-height: 1; }
details.faq[open] summary::after { content: '−'; }
details.faq p { margin: var(--s-md) 0 0; color: var(--muted); max-width: 78ch; }

/* ─── Khối nhắc còn thiếu số liệu (chỉ hiện ở bản nháp) ───────────────── */
.todo {
  background: #fff8e1; border: 1px solid #f0d98a; border-radius: var(--radius-md);
  padding: var(--s-md) var(--s-lg); font-size: 14px; color: #6b5300;
}
.todo code { background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 4px; }

/* ─── CTA cuối ─────────────────────────────────────────────────────────── */
.cta { background: var(--bright-green); color: var(--forest); border-radius: var(--radius-xl); padding: clamp(40px, 6vw, 72px); text-align: center; }
.cta h2 { color: var(--forest); }
.cta .lead { color: rgba(22, 51, 0, 0.74); margin-left: auto; margin-right: auto; }
.cta .btn-primary { background: var(--forest); color: var(--bright-green); }
.cta .btn-primary:hover { background: var(--forest-deep); }
.cta .btn-row { justify-content: center; }

/* ─── Footer ───────────────────────────────────────────────────────────── */
footer { background: var(--forest-deep); color: rgba(255, 255, 255, 0.66); padding: var(--s-section) 0 var(--s-xl); font-size: 15px; }
footer a { color: rgba(255, 255, 255, 0.82); }
footer a:hover { color: var(--bright-green); }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--s-xl); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); margin: 0 0 var(--s-md); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-logo svg, .foot-logo img { height: 34px; width: auto; margin-bottom: var(--s-md); }
.foot-bottom { margin-top: var(--s-section); padding-top: var(--s-lg); border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-wrap: wrap; gap: var(--s-md); justify-content: space-between; font-size: 13.5px; color: rgba(255, 255, 255, 0.5); }

/* ─── Hoạt ảnh cuộn ──────────────────────────────────────────────────────
   ⚠️ Trạng thái ẩn PHẢI nằm sau `.js`, và class đó do một script nội tuyến ở
   <head> gắn vào <html>. Viết `.reveal { opacity: 0 }` trần là JS không chạy
   (bị chặn, tải lỗi, crawler không thực thi) thì TOÀN BỘ trang dưới hero
   trắng trơn — mà trang vẫn trả HTTP 200 nên không có gì báo. Đã thấy đúng
   lỗi này khi chụp ảnh cả trang lúc dựng (21/09).
   Đảo lại như dưới đây thì mặc định là HIỆN, hoạt ảnh chỉ là phần thêm. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal[data-d='1'] { transition-delay: 0.08s; }
.js .reveal[data-d='2'] { transition-delay: 0.16s; }
.js .reveal[data-d='3'] { transition-delay: 0.24s; }
.js .reveal[data-d='4'] { transition-delay: 0.32s; }

/* Cùng lý do: vòng điểm và thanh trụ chỉ "rỗng lúc đầu" khi JS có thể lấp
   chúng. Không có JS thì vẽ sẵn ở giá trị cuối. */
.js .score-ring-arc { stroke-dashoffset: 471; }
:root:not(.js) .score-ring-arc { stroke-dashoffset: 118; }
:root:not(.js) .pillar-bar > i { width: 70%; }

/* ⚠️ Tôn trọng `prefers-reduced-motion`: người bật nó thường vì hoạt ảnh gây
   chóng mặt hoặc buồn nôn thật, không phải vì thích tĩnh. Ở đây phải TẮT hoạt
   ảnh mà vẫn HIỆN nội dung — để `.reveal` nguyên opacity 0 là trang trắng. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .score-ring-arc { stroke-dashoffset: 118 !important; transition: none !important; }
  .pillar-bar > i { transition: none !important; }
  .btn:active { transform: none; }
}

/* ─── Trang văn bản pháp lý ────────────────────────────────────────────── */
.legal { padding: var(--s-xxl) 0 var(--s-section); }
.legal-wrap { max-width: 800px; margin: 0 auto; padding: 0 var(--s-lg); }
.legal h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: var(--s-md); }
.legal-meta { font-size: 14px; color: var(--muted); margin-bottom: var(--s-xxl); padding-bottom: var(--s-lg); border-bottom: 1px solid var(--border); }
.legal-meta span + span::before { content: ' · '; }
.legal-preamble { font-size: 1.05rem; color: var(--muted); margin-bottom: var(--s-xxl); }
.legal article { margin-bottom: var(--s-xxl); }
.legal article > h2 { font-size: 1.45rem; margin-bottom: var(--s-md); }
.legal .art-lead { color: var(--muted); }
/* `min-width: 0` vì `ol` là lưới: con của lưới mặc định `min-width: auto`,
   nên một khoản chứa chuỗi dài không ngắt được sẽ KÉO cả cột giãn ra. */
.legal ol.clauses { margin: 0; padding-left: 1.6em; display: grid; gap: var(--s-md); min-width: 0; }
.legal ol.clauses > li { padding-left: 4px; min-width: 0; }
.legal-toc { background: var(--cloud); border-radius: var(--radius-lg); padding: var(--s-lg); margin-bottom: var(--s-xxl); }
.legal-toc h2 { font-family: var(--sans); font-weight: 400; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--s-md); }
.legal-toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: 8px; font-size: 15px; }
.lang-switch { display: inline-flex; gap: var(--s-sm); margin-bottom: var(--s-lg); }
.lang-switch a { font-size: 14px; padding: 6px 14px; border-radius: var(--radius-pill); background: var(--neutral); color: var(--muted); }
.lang-switch a:hover { text-decoration: none; }
.lang-switch a[aria-current='true'] { background: var(--forest); color: var(--bright-green); }

.step { display: flex; gap: var(--s-md); align-items: flex-start; margin-bottom: var(--s-lg); }
.step-n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--forest); color: var(--bright-green); display: grid; place-items: center; font-size: 14px; }
.callout { background: var(--mint); border-radius: var(--radius-md); padding: var(--s-lg); margin: var(--s-lg) 0; }
.callout.warn { background: #fff8e1; }
.callout p:last-child { margin-bottom: 0; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--forest); color: var(--white); padding: 12px 20px; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; border-radius: 4px; }
.bg-dark :focus-visible, .hero :focus-visible, footer :focus-visible { outline-color: var(--bright-green); }