/* ==========================================================================
   Nối · landing page
   Hướng nghệ thuật: "Rừng & Đồng". Lấy đúng hai màu của dải lụa trong logo
   (xanh rêu, đồng) trên nền giấy kem (sáng) hoặc rừng đêm (tối). Nhịp trang
   theo trang sản phẩm Apple: tiêu đề lớn, chương ngắn, nền đổi theo chương.
   Engine scrollcraft.css lo cơ chế; file này chỉ chứa token và markup riêng.
   ========================================================================== */

/* ------------------------------------------------------------- tokens -- */
:root {
  --sc-font-display: "Be Vietnam Pro", "SF Pro Display", system-ui, sans-serif;
  --sc-font-text: "Be Vietnam Pro", "SF Pro Text", system-ui, sans-serif;

  /* Sáng: giấy kem của OGP, chữ rừng sẫm, nhấn xanh rêu của app. */
  --sc-canvas: #f6f0e6;
  --sc-surface: #fffcf7;
  --sc-ink: #0f2418;
  --sc-ink-soft: #4a5c4f;
  --sc-accent: #1e5b36;
  --sc-accent-ink: #f8f3ea;
  --copper: #9f5b26;
  --copper-hi: #e8a96b;
  --moss: #2f6b3f;
  --danger: #b0392d;
  --panel: #fffdf9;
  --panel-2: #f3ebdf;
  --panel-line: color-mix(in oklab, var(--sc-ink) 10%, transparent);
  --nav-bg: color-mix(in oklab, var(--sc-canvas) 78%, transparent);
  --sc-shadow-color: 32 35% 22%;
  --glow: color-mix(in oklab, var(--copper-hi) 34%, transparent);
  --bed-a: #e9c49a;
  --bed-b: #2c6a40;
  --bed-opacity: 0.55;

  --r-window: 14px;
  --r-ui: 10px;
  --nav-h: 84px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
}

:root[data-theme="dark"] {
  --sc-canvas: #06130c;
  --sc-surface: #0c1e14;
  --sc-ink: #f0eadf;
  --sc-ink-soft: #a3b2a5;
  --sc-accent: #8fcb98;
  --sc-accent-ink: #06130c;
  --copper: #d9975b;
  --copper-hi: #f0b57c;
  --moss: #8fcb98;
  --danger: #f08a7e;
  --panel: #0f2318;
  --panel-2: #0b1b12;
  --panel-line: color-mix(in oklab, var(--sc-ink) 11%, transparent);
  --nav-bg: color-mix(in oklab, var(--sc-canvas) 72%, transparent);
  --sc-shadow-color: 150 60% 2%;
  --glow: color-mix(in oklab, var(--copper) 22%, transparent);
  --bed-a: #7a4a24;
  --bed-b: #1c4a2c;
  --bed-opacity: 0.5;
  color-scheme: dark;
}

/* Chương "sâu": nền rừng cố định ở cả hai chế độ, dành cho cao trào.
   Đặt lại cả `color`, vì token đổi trên cây con không tự đổi màu chữ đã kế thừa. */
.ground-deep {
  --sc-canvas: #0a2015;
  --sc-surface: #10291c;
  --sc-ink: #f2ecdf;
  --sc-ink-soft: #b2c1b3;
  --sc-accent: #9bd3a3;
  --sc-accent-ink: #0a2015;
  --panel: #f8f2e8;
  --panel-2: #efe6d8;
  --panel-line: rgba(15, 36, 24, 0.1);
  --panel-ink: #0f2418;
  --panel-ink-soft: #4a5c4f;
  --panel-accent: #1e5b36;
  background: var(--sc-canvas);
  color: var(--sc-ink);
}
:root[data-theme="dark"] .ground-deep {
  --sc-canvas: #0b2216;
  --panel: #12291d;
  --panel-2: #0e2117;
  --panel-line: rgba(240, 234, 223, 0.1);
  --panel-ink: #f0eadf;
  --panel-ink-soft: #a3b2a5;
  --panel-accent: #8fcb98;
}

/* ---------------------------------------------------------------- base -- */
html { background: var(--sc-canvas); }
body {
  transition: background-color 280ms var(--ease), color 280ms var(--ease);
  font-feature-settings: "ss01" off;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button { cursor: pointer; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Ẩn hẳn khỏi màn hình đầu (trước đây lộ 1px viền ở góc trên trái), chỉ hiện khi dùng phím Tab. */
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  padding: 10px 14px; border-radius: var(--r-ui); text-decoration: none;
  transform: translateY(-200%); opacity: 0;
}
.skip:focus { transform: none; opacity: 1; }

.display {
  font-family: var(--sc-font-display);
  font-weight: 650;
  letter-spacing: -0.032em;
  line-height: 1.1;
  text-wrap: balance;
}
.display--xl { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 5.4rem); }
.display--lg { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4.4rem); }
.display--md { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); letter-spacing: -0.025em; }
.lede {
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  line-height: 1.55;
  color: var(--sc-ink-soft);
  max-width: 34ch;
  text-wrap: pretty;
}
.muted { color: var(--sc-ink-soft); }
.wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: var(--sc-gutter); }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0 1.4em;
  border-radius: 999px; border: 0;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: 1rem; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  box-shadow: var(--sc-e1), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 140ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: color-mix(in oklab, var(--sc-accent) 88%, var(--sc-ink)); box-shadow: var(--sc-e2); }
}
.btn--sm { min-height: 34px; padding: 0 0.95em; font-size: 0.875rem; }
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.35em;
  color: var(--sc-accent); font-weight: 600; text-decoration: none;
  min-height: 44px;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* ------------------------------------------------- header viên thuốc -- */
:root {
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.55));
  --glass-blur: blur(22px) saturate(180%);
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(15, 36, 24, 0.04), inset 0 0 0 1px rgba(15, 36, 24, 0.07);
  --glass-drop: 0 14px 34px -16px rgba(64, 44, 22, 0.32);
  --lens-bg: rgba(15, 36, 24, 0.07);
  --lens-rim: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --spring: cubic-bezier(0.34, 1.3, 0.55, 1);
}
:root[data-theme="dark"] {
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045));
  --glass-rim: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --glass-drop: 0 14px 34px -14px rgba(0, 0, 0, 0.7);
  --lens-bg: rgba(255, 255, 255, 0.1);
  --lens-rim: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.pill-header {
  position: fixed; top: 12px; left: 0; right: 0; z-index: 70;
  pointer-events: none;
}
.pill {
  pointer-events: auto;
  width: calc(100% - var(--sc-gutter) * 2); max-width: 1120px; margin-inline: auto;
  height: 60px; padding: 0 8px 0 20px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-drop);
  transition: max-width 600ms var(--ease), height 600ms var(--ease), box-shadow 300ms var(--ease);
}
.pill-header.is-scrolled .pill { max-width: 1040px; height: 56px; }
.brand {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; font-weight: 700; font-size: 1.18rem; letter-spacing: -0.02em;
  min-height: 44px;
}
.brand img { width: 30px; height: auto; }
.pill__nav { position: relative; justify-self: center; }
.pill__links { position: relative; z-index: 1; display: flex; gap: 2px; list-style: none; padding: 0; margin: 0; }
.pill__links a {
  display: block; padding: 8px 14px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  color: var(--sc-ink-soft);
  transition: color 240ms var(--ease);
}
.pill__links a:hover, .pill__links a[aria-current] { color: var(--sc-ink); }
.pill__lens {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
  border-radius: 999px; pointer-events: none;
  background: var(--lens-bg); box-shadow: var(--lens-rim);
  opacity: 0;
  transition: transform 520ms var(--spring), width 520ms var(--spring), opacity 240ms var(--ease);
}
.pill__tools { justify-self: end; display: flex; align-items: center; gap: 0.3rem; }
.toggle {
  display: inline-grid; place-items: center;
  min-width: 40px; height: 40px; padding: 0 0.6rem;
  border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--sc-ink);
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.toggle:hover { background: var(--lens-bg); }
.toggle:active { transform: scale(0.94); }
.toggle svg { width: 18px; height: 18px; }
.toggle .i-moon { display: none; }
:root[data-theme="dark"] .toggle .i-sun { display: none; }
:root[data-theme="dark"] .toggle .i-moon { display: block; }
.toggle--lang { border-color: var(--panel-line); min-width: 44px; }
.pill__cta { margin-left: 0.3rem; gap: 0; min-height: 44px; padding: 0 1.1em; }

@media (max-width: 960px) {
  .pill { grid-template-columns: 1fr auto; padding-left: 16px; }
  .pill__nav { display: none; }
}
@media (max-width: 400px) {
  .pill { gap: 0.5rem; padding-left: 14px; }
  .pill__tools { gap: 0.15rem; }
  .pill__cta { padding: 0 0.95em; }
}

/* ------------------------------------------------- nút lên đầu trang -- */
.to-top {
  position: fixed; z-index: 65;
  right: calc(20px + env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--sc-ink);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--glass-drop);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.9);
  transition: opacity 300ms var(--ease), transform 500ms var(--spring), visibility 0s linear 500ms;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--ease), transform 500ms var(--spring), visibility 0s; }
.to-top:hover .to-top__arrow { transform: translateY(-2px); }
.to-top:active { transform: scale(0.94); }
.to-top__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top__ring circle { fill: none; stroke-width: 2; }
.to-top__ring .to-top__track { stroke: var(--panel-line); }
.to-top__ring circle:last-child { stroke: var(--sc-accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 120ms linear; }
.to-top__arrow { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 240ms var(--ease); }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.is-visible { transform: none; } }

/* ============================================================== HERO == */
.hero__stage { isolation: isolate; }
.hero {
  --wp: clamp(0, (var(--sc-p, 0) - 0.06) / 0.58, 1);
  --we: calc(var(--wp) * var(--wp) * (3 - 2 * var(--wp)));
  --tp: clamp(0, (var(--sc-p, 0) - 0.62) / 0.3, 1);
}
.hero__bed {
  position: absolute; inset: -10% -5%; z-index: 0; pointer-events: none;
  opacity: var(--bed-opacity);
  transform: translate3d(0, calc(var(--sc-p, 0) * -6vh), 0);
}
.hero__bed svg { width: 100%; height: 100%; }
/* Sóng trồi lên khi trang tải, rồi uốn chậm liên tục (SMIL <animate> trên path). */
.wave { animation: wave-in 1.8s var(--ease) both; }
.wave--2 { animation-delay: 0.14s; }
.wave--3 { animation-delay: 0.28s; animation-name: wave-in-top; }
@keyframes wave-in { from { transform: translateY(220px); opacity: 0; } }
@keyframes wave-in-top { from { transform: translateY(-160px); opacity: 0; } }
.hero__glow {
  position: absolute; z-index: 1; pointer-events: none;
  width: 70vmax; height: 70vmax; right: -14vmax; top: -12vmax;
  background: radial-gradient(closest-side, var(--glow), transparent 72%);
  transform: translate3d(0, calc(var(--we) * -10vh), 0);
}
.hero__copy {
  position: absolute; z-index: 4;
  left: var(--sc-gutter); top: 50%;
  translate: 0 -54%;
  width: min(46rem, 54vw);
}
.hero__copy h1 { font-size: clamp(2.4rem, 1rem + 3.9vw, 4.6rem); }
.hero__copy h1 { margin-bottom: 1.25rem; }
.hero__copy h1 span { display: block; }
.hero__copy .lede { margin-bottom: 2rem; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.hero__req { font-size: 0.875rem; color: var(--sc-ink-soft); }

.hero__logo {
  position: absolute; z-index: 3;
  right: max(var(--sc-gutter), 6vw); top: 50%;
  width: min(36vw, 520px);
  translate: 0 -56%;
  transform:
    translate3d(calc(var(--we) * 9vw), calc(var(--we) * -24vh), 0)
    scale(calc(1 - var(--we) * 0.38));
  opacity: calc(1 - var(--we) * 0.72);
  transform-origin: 50% 50%;
}
.hero__float { animation: float 7s ease-in-out infinite; }
.hero__logo img {
  width: 100%; height: auto;
  filter: drop-shadow(0 28px 34px hsl(var(--sc-shadow-color) / 0.28)) drop-shadow(0 6px 10px hsl(var(--sc-shadow-color) / 0.16));
}
.hero__shadow {
  position: absolute; left: 18%; right: 18%; bottom: -6%; height: 9%;
  background: radial-gradient(closest-side, hsl(var(--sc-shadow-color) / 0.28), transparent);
  filter: blur(6px);
  animation: shadow 7s ease-in-out infinite;
}
@keyframes float { 50% { transform: translate3d(0, -10px, 0) rotate(-1.2deg); } }
@keyframes shadow { 50% { transform: scaleX(0.9); opacity: 0.75; } }

/* Cửa sổ app neo ngay dưới câu "Cuối cùng cũng ở một chỗ", không căn giữa màn hình nữa,
   nên không bao giờ đè lên chữ. Chiều rộng tự co để cửa sổ (tỉ lệ 16:10) vừa phần còn lại của màn hình. */
.hero {
  --after-top: calc(var(--nav-h) + 3.2vh);
  --after-fs: clamp(1.4rem, 1rem + 1.6vw, 2.4rem);
  --dev-top: calc(var(--after-top) + var(--after-fs) * 2.2 + clamp(1.75rem, 4.5vh, 3.25rem));
}
.hero__device {
  position: absolute; z-index: 5; left: 50%; top: var(--dev-top);
  width: min(1040px, 88vw, (100vh - var(--dev-top) - 4vh) * 1.6);
  translate: -50% 0;
  transform:
    translate3d(0, calc((1 - var(--we)) * (92vh - var(--dev-top))), 0)
    scale(calc(0.92 + var(--we) * 0.08));
  transform-origin: 50% 0;
}
.hero__after {
  position: absolute; z-index: 6; left: 50%; top: var(--after-top);
  translate: -50% 0;
  width: min(44rem, 88vw);
  text-align: center;
  font-size: var(--after-fs);
}
.hero__after .muted { display: block; }

@media (max-width: 760px) {
  .hero__copy { top: calc(var(--nav-h) + 4.5svh); translate: none; width: auto; right: var(--sc-gutter); }
  .hero__copy h1 { font-size: clamp(2.2rem, 1.2rem + 5.2vw, 3rem); margin-bottom: 0.9rem; }
  .hero__copy .lede { font-size: 1.05rem; margin-bottom: 1.25rem; max-width: 30ch; }
  .hero__req { display: none; }
  .hero__logo {
    right: auto; left: 50%; top: auto; bottom: 21svh;
    width: min(74vw, 330px); translate: -50% 0;
    transform: translate3d(0, calc(var(--we) * -30svh), 0) scale(calc(1 - var(--we) * 0.4));
  }
  .hero { --after-top: calc(var(--nav-h) + 2svh); --after-fs: 1.3rem; }
  .hero__device { width: min(300px, 74vw, (100svh - var(--dev-top) - 3svh) * 9 / 19); }
  .hero__glow { right: -40vmax; top: -10vmax; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero__logo { width: min(44vw, 200px); bottom: 12svh; }
}

/* ======================================================= app surface == */
/* Màn hình app dựng lại theo SwiftUI: cột bên, danh sách, chi tiết. */
.win {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-window);
  background: var(--panel);
  color: var(--panel-ink, var(--sc-ink));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 0 0 1px var(--panel-line),
    0 30px 60px -20px hsl(var(--sc-shadow-color) / 0.45),
    0 70px 120px -40px hsl(var(--sc-shadow-color) / 0.35);
  overflow: hidden;
  display: grid;
  grid-template-columns: 24% 1fr 30%;
  font-size: clamp(9px, 0.92vw, 13px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-align: left;
}
:root[data-theme="dark"] .win { box-shadow: 0 0 0 1px var(--panel-line), 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.win__side {
  background: var(--panel-2);
  border-right: 1px solid var(--panel-line);
  padding: 2.9em 0.9em 1em;
  display: flex; flex-direction: column; gap: 0.15em;
  overflow: hidden;
}
.win__lights { position: absolute; left: 1.1em; top: 1.05em; display: flex; gap: 0.55em; }
.win__lights i { width: 0.95em; height: 0.95em; border-radius: 50%; background: #e2675b; }
.win__lights i:nth-child(2) { background: #e5b54a; }
.win__lights i:nth-child(3) { background: #5fb25a; }
.win__brand { display: flex; align-items: center; gap: 0.5em; font-weight: 700; font-size: 1.35em; margin: 0.2em 0.4em 0.7em; }
.win__brand img { width: 1.6em; height: auto; }
.win__group { font-size: 0.82em; font-weight: 600; color: var(--panel-ink-soft, var(--sc-ink-soft)); margin: 0.9em 0.5em 0.25em; }
.side-item {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.38em 0.55em; border-radius: 0.5em;
  white-space: nowrap;
}
.side-item svg { width: 1.15em; height: 1.15em; color: var(--panel-accent, var(--sc-accent)); flex: none; }
.side-item.is-on { background: color-mix(in oklab, var(--panel-accent, var(--sc-accent)) 16%, transparent); font-weight: 600; }
.side-item b { margin-left: auto; font-weight: 500; color: var(--panel-ink-soft, var(--sc-ink-soft)); font-size: 0.9em; }
.side-dot { width: 0.7em; height: 0.7em; border-radius: 50%; flex: none; margin-inline: 0.22em; }

.win__main { padding: 2.6em 1.6em 1em; overflow: hidden; display: flex; flex-direction: column; gap: 0.9em; }
.win__title { font-size: 2em; font-weight: 700; letter-spacing: -0.02em; }
.qa {
  display: flex; align-items: center; gap: 0.6em;
  border: 1px solid var(--panel-line); border-radius: 0.7em;
  padding: 0.6em 0.8em; color: var(--panel-ink-soft, var(--sc-ink-soft));
  background: color-mix(in oklab, var(--panel-2) 60%, transparent);
}
.qa svg { width: 1.2em; height: 1.2em; color: var(--panel-accent, var(--sc-accent)); }
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6em; }
.tile { border-radius: 0.7em; background: var(--panel-2); padding: 0.6em 0.8em; }
.tile b { display: block; font-size: 1.5em; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile span { font-size: 0.85em; color: var(--panel-ink-soft, var(--sc-ink-soft)); }
.tile--red b { color: var(--danger); }
.tile--acc b { color: var(--panel-accent, var(--sc-accent)); }
.list-h { display: flex; justify-content: space-between; font-weight: 600; font-size: 0.95em; margin-top: 0.3em; }
.list-h--red { color: var(--danger); }
.list-h span { color: var(--panel-ink-soft, var(--sc-ink-soft)); font-weight: 500; }
.row { display: flex; gap: 0.7em; align-items: flex-start; padding: 0.42em 0; border-bottom: 1px solid var(--panel-line); }
.row:last-child { border-bottom: 0; }
.ck {
  flex: none; width: 1.25em; height: 1.25em; margin-top: 0.08em; border-radius: 50%;
  border: 1.5px solid color-mix(in oklab, var(--panel-ink, var(--sc-ink)) 35%, transparent);
  display: grid; place-items: center;
}
.ck--p3 { border-color: var(--danger); }
.ck--p2 { border-color: var(--copper); }
.ck.is-done { background: var(--panel-accent, var(--sc-accent)); border-color: var(--panel-accent, var(--sc-accent)); }
.ck.is-done::after {
  content: ""; width: 0.55em; height: 0.3em; margin-top: -0.12em;
  border-left: 2px solid var(--panel, #fff); border-bottom: 2px solid var(--panel, #fff);
  transform: rotate(-45deg);
}
.row__t { font-weight: 500; }
.row__m { display: flex; gap: 0.75em; flex-wrap: wrap; font-size: 0.85em; color: var(--panel-ink-soft, var(--sc-ink-soft)); }
.row__m .red { color: var(--danger); }
.row__m svg { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; margin-right: 0.2em; }
.row__pin { margin-left: auto; color: var(--copper); }
.row__pin svg { width: 1em; height: 1em; }
.win__detail { border-left: 1px solid var(--panel-line); padding: 2.6em 1.3em 1em; display: flex; flex-direction: column; gap: 0.8em; overflow: hidden; }
.d-title { font-size: 1.35em; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.d-sec { font-size: 0.8em; font-weight: 600; color: var(--panel-ink-soft, var(--sc-ink-soft)); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.4em; }
.d-box { border-radius: 0.6em; background: var(--panel-2); padding: 0.55em 0.75em; display: flex; flex-direction: column; gap: 0.35em; }
.d-line { display: flex; justify-content: space-between; gap: 0.5em; }
.d-line span:first-child { color: var(--panel-ink-soft, var(--sc-ink-soft)); }
.d-note { display: flex; gap: 0.55em; align-items: center; }
.d-note svg { width: 1.1em; height: 1.1em; color: var(--copper); flex: none; }

/* Điện thoại: cùng dữ liệu, bố cục một cột. */
@media (max-width: 760px) {
  .hero .win {
    aspect-ratio: 9 / 19;
    border-radius: 38px;
    grid-template-columns: 1fr;
    font-size: 11.5px;
    box-shadow: 0 0 0 6px #10140f, 0 0 0 7px rgba(255,255,255,0.12), 0 40px 80px -24px hsl(var(--sc-shadow-color) / 0.55);
  }
  .hero .win__side, .hero .win__detail, .hero .win__lights { display: none; }
  .hero .win__main { padding: 3.6em 1.2em 1em; }
  .hero .win::before {
    content: ""; position: absolute; left: 50%; top: 0.9em; translate: -50% 0;
    width: 32%; height: 1.9em; border-radius: 1em; background: #10140f;
  }
  .hero .tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================== WHY == */
.why { padding-block: clamp(6rem, 18vh, 12rem) clamp(5rem, 14vh, 10rem); }
.why__text {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: clamp(1.9rem, 1.1rem + 3vw, 3.9rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  max-width: 22ch;
  text-wrap: balance;
}
.why__text + .why__text { margin-top: 0.6em; }
.why__w {
  opacity: clamp(0.16, calc(var(--why, 1) * (var(--n, 40) + 2) - var(--i, 0)), 1);
  transition: opacity 120ms linear;
}
.why__accent { color: var(--sc-accent); }

/* ============================================================ QUICK == */
.quick { padding-block: var(--sc-section); background: var(--sc-surface); }
.quick__grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.quick__copy h2 { margin-bottom: 1.25rem; }
.quick__copy .lede { max-width: 32ch; }
.quick__legend { margin-top: 1.5rem; font-size: 0.95rem; color: var(--sc-ink-soft); max-width: 36ch; }
.quick__legend code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.92em;
  background: color-mix(in oklab, var(--sc-ink) 7%, transparent);
  padding: 0.1em 0.4em; border-radius: 6px; color: var(--sc-ink);
}
.composer {
  background: var(--panel); border-radius: 22px;
  box-shadow: 0 0 0 1px var(--panel-line), var(--sc-e3);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.composer__field {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1.5px solid var(--panel-line); border-radius: 14px;
  padding: 0.25rem 0.5rem 0.25rem 1rem;
  background: var(--sc-canvas);
  transition: border-color 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.composer__field:focus-within { border-color: var(--sc-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sc-accent) 18%, transparent); }
.composer__field svg { width: 22px; height: 22px; color: var(--sc-accent); flex: none; }
.composer input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: max(16px, 1.05rem); padding: 0.85rem 0; color: var(--sc-ink);
}
.composer__clear {
  border: 0; background: transparent; color: var(--sc-ink-soft);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
}
.composer__clear:hover { background: color-mix(in oklab, var(--sc-ink) 7%, transparent); }
.composer__clear svg { width: 16px; height: 16px; color: inherit; }
.composer__gloss { font-size: 0.9rem; color: var(--sc-ink-soft); margin-top: 0.6rem; min-height: 1.4em; font-style: italic; }
.parse { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 0.1rem; }
.parse li {
  display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; align-items: center;
  padding: 0.7rem 0; border-top: 1px solid var(--panel-line);
  min-height: 3.25rem;
}
.parse li:first-child { min-height: 4.4rem; }
.parse dt, .parse .k { font-size: 0.875rem; color: var(--sc-ink-soft); }
.parse .v { font-weight: 600; }
.chip {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.25em 0.7em; border-radius: 999px; font-size: 0.92rem; font-weight: 600;
  background: color-mix(in oklab, var(--sc-accent) 13%, transparent); color: var(--sc-accent);
  margin-right: 0.35rem;
}
/* Chỉ hàng vừa đổi mới chạy hiệu ứng; transform + opacity, không đổi kích thước. */
.parse .v.is-new > .chip { animation: chip-in 380ms var(--ease) both; }
.parse .v.is-new > .chip + .chip { animation-delay: 60ms; }
@keyframes chip-in { from { opacity: 0; transform: translate3d(0, 6px, 0) scale(0.97); } }
.parse .v--title { overflow-wrap: anywhere; }
.chip svg { width: 14px; height: 14px; }
.chip--p3 { background: color-mix(in oklab, var(--danger) 14%, transparent); color: var(--danger); }
.chip--p2 { background: color-mix(in oklab, var(--copper) 16%, transparent); color: color-mix(in oklab, var(--copper) 82%, var(--sc-ink)); }
.chip--none { background: transparent; color: var(--sc-ink-soft); font-weight: 500; padding-left: 0; }

.examples { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }
.examples p { width: 100%; font-size: 0.875rem; color: var(--sc-ink-soft); }
.ex {
  border: 1px solid var(--panel-line); background: transparent; color: var(--sc-ink);
  border-radius: 999px; padding: 0.55rem 0.95rem; font-size: 0.875rem; min-height: 40px;
  text-align: left;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.ex:hover { background: color-mix(in oklab, var(--sc-accent) 8%, transparent); border-color: color-mix(in oklab, var(--sc-accent) 40%, transparent); }
.ex[aria-pressed="true"] { border-color: var(--sc-accent); background: color-mix(in oklab, var(--sc-accent) 10%, transparent); }

@media (max-width: 900px) {
  .quick__grid { grid-template-columns: 1fr; }
  .parse li { grid-template-columns: 6rem 1fr; }
}

/* =========================================================== CONNECT == */
.connect__stage {
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 4vh) var(--sc-gutter) 4vh;
  --cp: var(--sc-p, 0);
  --draw: clamp(0, (var(--cp) - 0.3) / 0.26, 1);
}
.connect__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; max-width: 76rem; width: 100%; margin-inline: auto; }
.connect__head h2 { max-width: 16ch; }
.connect__steps { position: relative; list-style: none; padding: 0; margin: 0; width: min(24rem, 34vw); min-height: 5.4em; flex: none; }
.connect__steps li {
  position: absolute; inset: 0 0 auto 0;
  font-size: clamp(1.05rem, 0.85rem + 0.6vw, 1.45rem); line-height: 1.4; color: var(--sc-ink);
  font-weight: 500; letter-spacing: -0.01em;
  opacity: 0; will-change: opacity, transform;
}
.connect__steps li:first-child { opacity: 1; }
.connect__steps li small { display: block; color: var(--sc-ink-soft); font-size: 0.85em; margin-top: 0.3em; }
.connect__board {
  position: relative; flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(3rem, 10vw, 10rem);
  align-items: center;
  max-width: 76rem; width: 100%; margin: clamp(1.5rem, 4vh, 3rem) auto 0;
}
.pane {
  position: relative; z-index: 2;
  background: var(--panel); color: var(--panel-ink);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 30px 60px -24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--panel-line);
  font-size: clamp(13px, 0.6rem + 0.45vw, 16px);
  overflow: hidden;
}
.pane__bar {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.7em 0.9em; border-bottom: 1px solid var(--panel-line);
  font-size: 0.86em; color: var(--panel-ink-soft);
}
.pane__bar .sp { flex: 1; }
.tb {
  display: inline-flex; align-items: center; gap: 0.35em;
  padding: 0.35em 0.7em; border-radius: 0.55em; color: var(--panel-ink);
  font-weight: 500;
}
.tb svg { width: 1.1em; height: 1.1em; }
.tb--make { color: var(--panel-accent); background: color-mix(in oklab, var(--panel-accent) 12%, transparent); transition: transform 140ms var(--sc-ease-out), background-color 160ms; }
.is-press .tb--make { transform: scale(0.94); background: color-mix(in oklab, var(--panel-accent) 26%, transparent); }
.pane__body { padding: 1.1em 1.3em 1.3em; }
.note__title { font-size: 1.55em; font-weight: 700; letter-spacing: -0.02em; }
.note__meta { font-size: 0.82em; color: var(--panel-ink-soft); margin: 0.2em 0 0.9em; }
.note__lines { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15em; }
.nl {
  position: relative; display: flex; align-items: flex-start; gap: 0.6em;
  padding: 0.42em 0.5em; border-radius: 0.5em; line-height: 1.45;
  transition: background-color 240ms var(--sc-ease-out);
}
.nl__b { color: var(--panel-ink-soft); width: 1.1em; flex: none; text-align: center; }
.nl__t { flex: 1; }
.nl--target.is-cursor, .is-cursor .nl--target { background: color-mix(in oklab, var(--copper) 16%, transparent); }
.nl__caret {
  display: inline-block; width: 2px; height: 1.15em; vertical-align: -0.2em; margin-left: 2px;
  background: var(--copper); opacity: 0;
}
.is-cursor .nl__caret { opacity: 1; animation: blink 1s steps(1) infinite; }
.is-made .nl__caret { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.nl__link {
  display: inline-flex; align-items: center; gap: 0.25em; flex: none;
  font-size: 0.78em; font-weight: 600; color: var(--panel-accent);
  padding: 0.15em 0.55em; border-radius: 999px;
  background: color-mix(in oklab, var(--panel-accent) 12%, transparent);
  opacity: 0; transform: scale(0.95);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.nl__link svg { width: 1em; height: 1em; }
.is-linked .nl__link { opacity: 1; transform: none; }
.nl__anchor { display: inline-block; width: 1px; height: 1px; }
.nl--target .ck { display: none; }
.is-made .nl--target .nl__b { display: none; }
.is-made .nl--target .ck { display: grid; }
.is-done .nl--target .nl__t { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--panel-ink) 45%, transparent); color: var(--panel-ink-soft); }
.note__linked {
  margin-top: 1em; padding-top: 0.8em; border-top: 1px solid var(--panel-line);
  display: flex; justify-content: space-between; font-size: 0.86em;
  opacity: 0; transition: opacity 300ms var(--ease);
}
.note__linked span:last-child { color: var(--panel-ink-soft); font-variant-numeric: tabular-nums; }
.is-linked .note__linked { opacity: 1; }
.toast {
  position: absolute; left: 50%; bottom: 1em; translate: -50% 0;
  background: var(--panel-ink); color: var(--panel);
  font-size: 0.82em; padding: 0.55em 1em; border-radius: 999px; white-space: nowrap;
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
  max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
.is-toast .toast { opacity: 1; transform: none; }

.pane--task { opacity: calc(0.0 + var(--draw) * 3); transform: translate3d(calc((1 - min(1, var(--draw) * 1.6)) * 24px), 0, 0) scale(calc(0.95 + min(1, var(--draw) * 1.6) * 0.05)); }
.task__head { display: flex; gap: 0.75em; align-items: flex-start; }
.task__head .ck { width: 1.5em; height: 1.5em; border-width: 2px; margin-top: 0.15em; background: transparent; }
.task__head .ck.is-done { background: var(--panel-accent); }
.task__ckbtn { border: 0; padding: 10px; margin: -10px; background: transparent; border-radius: 50%; color: inherit; }
.task__title { font-size: 1.3em; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.is-done .task__title { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--panel-ink) 45%, transparent); }
.task__fields { margin-top: 1em; display: grid; gap: 0.5em; }
.tf { display: flex; justify-content: space-between; gap: 1em; padding: 0.6em 0.8em; background: var(--panel-2); border-radius: 0.65em; font-size: 0.92em; }
.tf span:first-child { color: var(--panel-ink-soft); }
.tf b { font-weight: 600; text-align: right; }
.tf--due b { color: var(--panel-accent); }
.tf--src { flex-direction: column; gap: 0.15em; }
.tf--src b { text-align: left; display: flex; align-items: center; gap: 0.4em; }
.tf--src b svg { width: 1.05em; height: 1.05em; color: var(--copper); }
.tf--src small { color: var(--panel-ink-soft); font-size: 0.86em; }
.task__anchor { position: absolute; left: 0; top: 2.1em; width: 1px; height: 1px; }

.thread { position: absolute; inset: 0; z-index: 1; overflow: visible; pointer-events: none; }
.thread path {
  /* Ẩn hẳn khi chưa vẽ: nét dài 0 với đầu tròn vẫn để lại một chấm. */
  opacity: clamp(0, calc(var(--draw) * 40), 1);
  fill: none; stroke: url(#threadGrad); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--draw));
}
.thread .thread__under { stroke: rgba(0, 0, 0, 0.45); stroke-width: 12; filter: blur(6px); transform: translateY(6px); }
.thread circle { fill: #f6d3a8; opacity: calc(var(--draw) * 4); }
.thread .bead-ring { fill: none; stroke: var(--copper-hi); stroke-width: 2; opacity: 0; }
.is-done .thread .bead-ring { animation: ring 1.6s var(--ease) infinite; }
@keyframes ring { 0% { opacity: 0.8; r: 7; } 100% { opacity: 0; r: 22; } }

@media (max-width: 860px) {
  .connect__stage { padding-top: calc(var(--nav-h) + 2.5svh); padding-bottom: 2.5svh; }
  .connect__head { flex-direction: column; align-items: stretch; gap: 0.75rem; }
  .connect__head h2 { font-size: clamp(1.6rem, 1rem + 4vw, 2.2rem); }
  .connect__steps { width: auto; min-height: 4.6em; }
  .connect__steps li { font-size: 0.98rem; }
  .connect__steps li small { display: none; }
  .connect__board { grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 2.4rem; align-content: start; margin-top: 1rem; }
  .pane { font-size: 12.5px; }
  .note__lines .nl:nth-child(n+4) { display: none; }
  .note__meta { margin-bottom: 0.5em; }
  .pane--task { margin-left: 8%; }
  .task__fields .tf:nth-child(2) { display: none; }
  .toast { display: none; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .tf--src small { display: none; }
  .pane__body { padding: 0.8em 1em 1em; }
}

/* ============================================================== RAIL == */
.views__stage { display: flex; align-items: center; }
.rail { gap: clamp(1rem, 2vw, 1.75rem); padding-inline: var(--sc-gutter); align-items: stretch; }
.rail__lead { flex: 0 0 min(30rem, 80vw); display: flex; flex-direction: column; justify-content: center; padding-right: 2rem; }
.rail__lead h2 { margin-bottom: 1rem; }
.rail__end { flex: 0 0 min(22rem, 70vw); display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; padding-left: 1rem; }
.rail__end p { font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.kbd-inline { font-family: var(--sc-font-text); }
.view {
  flex: 0 0 clamp(17rem, 27vw, 23rem);
  display: flex; flex-direction: column; gap: 1rem;
  opacity: clamp(0.55, calc(1.6 - var(--rel, 0) ), 1);
}
.view h3 { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem); font-weight: 650; letter-spacing: -0.02em; display: flex; align-items: center; gap: 0.5rem; }
.view h3 svg { width: 1.1em; height: 1.1em; color: var(--sc-accent); }
.view > p { color: var(--sc-ink-soft); font-size: 1rem; max-width: 30ch; min-height: 3em; }
.mini {
  flex: 1;
  background: var(--panel); color: var(--panel-ink, var(--sc-ink));
  border-radius: 18px; padding: 1.1rem 1.1rem 0.6rem;
  box-shadow: 0 0 0 1px var(--panel-line), 0 1px 2px hsl(var(--sc-shadow-color) / 0.05), 0 10px 26px -18px hsl(var(--sc-shadow-color) / 0.24);
  font-size: 14px;
  min-height: 19rem;
}
.mini .list-h { font-size: 0.9rem; margin: 0.6rem 0 0.2rem; }
.mini .list-h:first-child { margin-top: 0; }
.mini .row { padding: 0.5rem 0; }
.mini__note { padding: 0.55rem 0; border-bottom: 1px solid var(--panel-line); }
.mini__note:last-child { border: 0; }
.mini__note b { display: block; font-weight: 600; }
.mini__note span { font-size: 0.86em; color: var(--panel-ink-soft, var(--sc-ink-soft)); }
.wikilink { color: var(--copper); font-weight: 600; }
.md { font-size: 0.95em; line-height: 1.55; }
.md li { list-style: none; display: flex; gap: 0.5em; align-items: flex-start; padding: 0.15em 0; }
.md ul { padding: 0; margin: 0.3em 0; }
.md h4 { margin: 0 0 0.3em; font-size: 1.15em; letter-spacing: -0.015em; }
.md .ck { width: 1.1em; height: 1.1em; margin-top: 0.2em; }
.tagrow { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.4rem; }
.tag { padding: 0.2em 0.65em; border-radius: 999px; font-size: 0.85em; background: var(--panel-2); color: var(--panel-ink-soft, var(--sc-ink-soft)); }
.tag.is-on { background: color-mix(in oklab, var(--sc-accent) 14%, transparent); color: var(--sc-accent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .view { opacity: 1; }
}

/* ============================================================== SYNC == */
.sync { padding-block: var(--sc-section); background: var(--sc-surface); }
.sync__top { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; align-items: end; }
.sync__top .lede { max-width: 38ch; }
.devices {
  position: relative; margin-top: clamp(3rem, 6vw, 5rem);
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: clamp(2rem, 8vw, 8rem);
  max-width: 64rem; margin-inline: auto;
}
.devices .win { font-size: clamp(7px, 0.75vw, 11px); grid-template-columns: 26% 1fr; }
.devices .win__detail { display: none; }
.phone {
  width: clamp(120px, 17vw, 210px); aspect-ratio: 9 / 19;
  border-radius: clamp(20px, 3vw, 34px);
  background: var(--panel); color: var(--panel-ink, var(--sc-ink));
  border: 7px solid #121812;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 4px hsl(var(--sc-shadow-color) / 0.12),
    0 24px 48px -18px hsl(var(--sc-shadow-color) / 0.34),
    0 60px 110px -30px hsl(var(--sc-shadow-color) / 0.38);
  overflow: hidden; position: relative;
  font-size: clamp(6.5px, 0.72vw, 10px);
  padding: 3.8em 1.2em 1em;
  display: flex; flex-direction: column; gap: 0.8em;
}
.phone::before { content: ""; position: absolute; left: 50%; top: 0.6em; translate: -50% 0; width: 34%; height: 1.9em; border-radius: 1em; background: #10140f; }
.phone .win__title { font-size: 2.2em; }
.sync__thread { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; }
.sync__thread path { fill: none; stroke: url(#syncGrad); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 10; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -24; } }
.specs { margin-top: clamp(3.5rem, 7vw, 6rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 1px solid var(--panel-line); padding-top: 2.25rem; }
.spec b {
  display: block; font-family: var(--sc-font-display); font-weight: 650;
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4.6rem); letter-spacing: -0.04em; line-height: 1.05;
  color: var(--sc-accent);
}
.spec b small { font-size: 0.42em; letter-spacing: -0.01em; font-weight: 600; margin-left: 0.3em; }
.spec p { color: var(--sc-ink-soft); margin-top: 0.5rem; max-width: 22ch; }
@media (max-width: 760px) {
  .sync__top { grid-template-columns: 1fr; }
  .devices { grid-template-columns: 1fr; justify-items: center; gap: 2.5rem; }
  .devices .win { width: 100%; font-size: 6.5px; }
  .phone { width: 46vw; font-size: 9px; }
  .specs { grid-template-columns: 1fr; gap: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { .sync__thread path { animation: none; } }

/* =========================================================== PRIVATE == */
.private { padding-block: var(--sc-section); }
.private__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(3rem, 8vw, 8rem); align-items: start; }
.private__grid h2 { margin-bottom: 1.25rem; }
.keys h3 { font-size: 1rem; font-weight: 600; color: var(--sc-ink-soft); margin-bottom: 0.75rem; }
.keys dl { margin: 0; display: grid; }
.keys div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--panel-line); }
.keys dd { margin: 0; display: flex; gap: 0.3rem; }
.keys dt { font-weight: 500; }
kbd {
  font-family: var(--sc-font-text); font-size: 0.85rem; font-weight: 600;
  min-width: 2rem; height: 2rem; padding: 0 0.5rem;
  display: inline-grid; place-items: center;
  border-radius: 8px; background: var(--panel);
  box-shadow: 0 0 0 1px var(--panel-line), 0 2px 0 var(--panel-line);
  color: var(--sc-ink);
}
@media (max-width: 860px) { .private__grid { grid-template-columns: 1fr; } }

/* ============================================================= CLOSE == */
.close { padding-block: clamp(6rem, 16vh, 11rem) 0; text-align: center; position: relative; overflow: hidden; }
.close__logo { width: clamp(120px, 16vw, 190px); height: auto; margin: 0 auto 2rem; filter: drop-shadow(0 18px 22px hsl(var(--sc-shadow-color) / 0.25)); }
.close h2 { margin-bottom: 1rem; }
.close .lede { margin: 0 auto 2.25rem; max-width: 30ch; }
.close__actions { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.close__req { margin-top: 0.5rem; font-size: 0.875rem; color: var(--sc-ink-soft); }
.foot {
  margin-top: clamp(5rem, 12vh, 8rem);
  border-top: 1px solid var(--panel-line);
  padding: 1.75rem var(--sc-gutter) calc(1.75rem + env(safe-area-inset-bottom));
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  max-width: 76rem; margin-inline: auto;
  font-size: 0.875rem; color: var(--sc-ink-soft);
}
.foot a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.foot a:hover { color: var(--sc-ink); }

/* ===================================================== reduced motion == */
@media (prefers-reduced-motion: reduce) {
  .hero__float, .hero__shadow { animation: none; }
  /* Hero thành một màn tĩnh, không ghim thêm quãng cuộn. */
  .hero { --we: 0; height: auto !important; }
  .hero [data-sc-cue] { opacity: 1 !important; transform: none !important; }
  .hero__after { display: none; }
  .hero__device { transform: none; top: auto; bottom: -38%; }
  .hero__bed, .hero__glow { transform: none; }
  .why__w { opacity: 1; }
  .connect__stage { --draw: 1; }
  .pane--task { transform: none; }
  .chip { animation: none; }
  .is-cursor .nl__caret { animation: none; }
}

/* ============================================= đồng bộ: bóng tràn ra ngoài == */
/* Trước đây hiệu ứng wipe (clip-path) cắt mất bóng và mép dưới điện thoại. */
.devices .win {
  box-shadow:
    0 0 0 1px var(--panel-line),
    0 2px 4px hsl(var(--sc-shadow-color) / 0.1),
    0 30px 60px -24px hsl(var(--sc-shadow-color) / 0.34),
    0 80px 140px -40px hsl(var(--sc-shadow-color) / 0.34);
}
:root[data-theme="dark"] .devices .win, :root[data-theme="dark"] .phone {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 70px -24px rgba(0, 0, 0, 0.7), 0 80px 140px -40px rgba(0, 0, 0, 0.55);
}
.devices-wrap { padding-bottom: 2rem; }

/* ============================================================= footer == */
/* Chữ hai bên thẳng mép với hai đầu đường kẻ trên. */
.foot { align-items: center; width: min(76rem - 2 * var(--sc-gutter), 100% - 2 * var(--sc-gutter)); max-width: none; padding-inline: 0; }
.foot__links { display: flex; gap: 1.75rem; }
/* Chừa chỗ cho nút lên đầu trang khi màn hình chưa đủ rộng để footer tránh được nó. */
@media (min-width: 561px) and (max-width: 1360px) { .foot__links { margin-right: 64px; } }
@media (max-width: 560px) {
  .foot { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .wave { animation: none; }
  .connect__steps li { transform: none !important; }
}