/* Atum website — keynote dark (landing v2).
   Static by default: with JS off, or reduced motion, or the motion pause on,
   every scroll scene renders its end state. site.js adds `.js` to <html>
   when it runs and `.scrolly` while scroll-driven scenes are allowed; it then
   writes the scene custom properties (--h, --u, --co, …) on each section. */

:root {
  --bg: #0a0a0a;
  --text: #f2f1ed;
  --muted: #a1a09b;
  --faint: #85847f;
  --card: #151514;
  --line-soft: rgba(242, 241, 237, 0.07);
  --line: rgba(242, 241, 237, 0.14);
  --line-strong: rgba(242, 241, 237, 0.22);
  --font:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Wordmark: Outfit 500 when installed locally; no webfont is loaded. */
  --font-brand: Outfit, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nav-h: 52px;
  color-scheme: dark;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  scroll-padding-top: var(--nav-h);
  -webkit-text-size-adjust: 100%;
}
html.scrolly {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1,
h2,
h3,
p {
  margin: 0;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
a:hover {
  color: #fff;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--text);
  color: var(--bg);
}
:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 60;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
  color: var(--bg);
}

/* Shared type and controls. */
.eyebrow {
  font-size: 17px;
  font-weight: 600;
  color: var(--muted);
}
.lead {
  max-width: 600px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--muted);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.faint {
  color: var(--faint);
}
/* Short notes wrap evenly instead of leaving one word on the last line. */
.screen-note,
.hero-caption,
.cta-note,
.release-meta,
.preview-note {
  text-wrap: balance;
}
.section-intro {
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}
.section-intro h2 {
  margin-top: 12px;
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.section-intro .lead {
  margin: 20px auto 0;
}
/* Headings set in two lines: each line is its own balanced block, so a
   narrow screen wraps inside a line instead of leaving one word alone on
   the last row. The <br> stays in the markup for reading without CSS. */
h1 > br,
h2 > br {
  display: none;
}
h1 > span,
h2 > span {
  display: block;
  text-wrap: balance;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  transition: background 0.2s;
}
.pill:hover {
  background: #fff;
  color: var(--bg);
}
.pill-small {
  padding: 6px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}
.pill-large {
  padding: 14px 28px;
  font-size: 17px;
}
.text-link {
  color: var(--text);
  font-size: 15px;
}
.screen-note {
  margin: 8px auto 0;
  max-width: 1080px;
  text-align: center;
  font-size: 12px;
  color: var(--faint);
}
.card {
  border-radius: 28px;
  background: var(--card);
}
.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: rgba(242, 241, 237, 0.08);
}
.segmented button {
  border: 0;
  border-radius: 999px;
  padding: 9px 20px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  transition:
    background 0.3s,
    color 0.3s;
}
.segmented button:hover {
  color: var(--text);
}
.segmented button[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}

/* Navigation. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  max-width: 1124px;
  min-height: var(--nav-h);
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}
.wordmark {
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 12.5px;
}
.nav-links a {
  color: var(--muted);
  transition: color 0.2s;
}
.nav-links a:hover {
  color: var(--text);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lang-switch {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.lang-option {
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background 0.25s,
    color 0.25s;
}
.lang-option[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}
/* Translation and motion controls need JS; hide them rather than show dead
   buttons when it is unavailable. */
html:not(.js) .lang-switch,
html:not(.js) .motion-toggle,
html:not(.js) .gallery-tabs {
  display: none;
}

/* Mac window frame for real screenshots. */
.mac-window {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #ecedf0;
  box-shadow:
    0 0 0 1px rgba(242, 241, 237, 0.16),
    0 50px 140px -30px rgba(0, 0, 0, 0.9);
}
.mac-titlebar {
  box-sizing: content-box;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border-bottom: 1px solid rgba(23, 25, 31, 0.07);
}
.mac-titlebar span,
.sw-lights span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f57;
}
.mac-titlebar span:nth-child(2),
.sw-lights span:nth-child(2) {
  background: #febc2e;
}
.mac-titlebar span:nth-child(3),
.sw-lights span:nth-child(3) {
  background: #28c840;
}
.mac-window img {
  width: 100%;
  height: auto;
}
.mac-window-small {
  border-radius: 12px;
}
.mac-window-small .mac-titlebar {
  height: 24px;
  gap: 7px;
  padding: 0 11px;
}
.mac-window-small .mac-titlebar span {
  width: 10px;
  height: 10px;
}
.product-glow {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 20%;
  bottom: -6%;
  background: radial-gradient(
    closest-side,
    rgba(242, 241, 237, 0.16),
    rgba(242, 241, 237, 0)
  );
  filter: blur(40px);
  pointer-events: none;
}

/* 1. Hero. Static: the eclipse and copy fill the first screen, the product
   window follows. Scrolly: 300vh with a sticky stage; the eclipse zooms into
   the moon and the window rises in its place. */
.hero {
  position: relative;
}
.hero-stage {
  position: relative;
}
.hero-intro {
  position: relative;
  height: 100vh;
  /* The eclipse glow is wider than a phone screen; clip it so the static
     layout (reduced motion, pause, no JS) never widens the page. */
  overflow-x: clip;
}
/* The eclipse sits in the room between the nav and the copy. The handoff's
   numbers assume copy up to 300px tall (top: 52px + (94vh − 352px) / 2,
   width: min(46vh, 70vw, max(110px, 94vh − 400px))); site.js raises --copy
   on narrow phones where the copy is taller, so the two never overlap. */
.hero-eclipse {
  --room: calc(94vh - var(--copy, 300px) - 52px);
  position: absolute;
  left: 50%;
  top: calc(52px + var(--room) / 2);
  width: min(46vh, 70vw, max(110px, calc(var(--room) - 48px)));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transform-origin: 47.45% 52.55%;
}
.hero-eclipse-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(
    closest-side,
    rgba(242, 241, 237, 0.13),
    rgba(242, 241, 237, 0) 70%
  );
  pointer-events: none;
}
.eclipse {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.eclipse-bead {
  transform-box: fill-box;
  transform-origin: center;
}
.hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6vh;
  padding: 0 24px;
  text-align: center;
}
.hero-copy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero h1 {
  margin-top: 10px;
  font-size: clamp(46px, 7vw, 104px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.hero .eyebrow {
  letter-spacing: -0.01em;
}
.hero .lead {
  margin-top: 18px;
}
.hero-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
}
.hero-window {
  position: relative;
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
}
.hero-caption {
  margin: 16px 0 0;
  padding: 0 24px;
  text-align: center;
  font-size: 12px;
  color: var(--faint);
}
.scrolly .hero {
  height: 300vh;
}
.scrolly .hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.scrolly .hero-intro {
  position: absolute;
  inset: 0;
  height: auto;
}
.scrolly .hero-eclipse {
  transform: translate(-50%, -50%) scale(var(--hz, 1));
  opacity: var(--he, 1);
  will-change: transform;
}
.scrolly .hero-copy,
.scrolly .hero-motion {
  opacity: clamp(0, calc(1 - var(--h, 0) * 7), 1);
}
.scrolly .hero-copy {
  transform: translateY(calc(var(--h, 0) * -140px));
}
/* Transparent once scrolled past, but still focusable: site.js scrolls back
   to the top when focus moves into it. */
.scrolly .hero.is-past-copy .hero-copy,
.scrolly .hero.is-past-copy .hero-motion {
  pointer-events: none;
}
.scrolly .hero-window {
  position: absolute;
  left: 50%;
  top: calc(50% + 14px);
  width: 1280px;
  margin: 0;
  transform: translate(-50%, -50%)
    scale(calc(var(--hws, 0.8) * (0.84 + 0.16 * var(--hw, 0))));
  opacity: var(--hw, 0);
  will-change: transform, opacity;
  pointer-events: none;
}
.scrolly .hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0;
  opacity: var(--hc, 0);
}

/* 2. How it works: live demo. Static: the final state, captions stacked.
   Scrolly (>=720px): 500vh with a sticky stage. Mobile with JS: four cropped
   frames, one per caption. */
.demo-intro {
  max-width: 980px;
  padding: 22vh 24px 6vh;
}
.demo-track {
  position: relative;
}
.demo-stage {
  position: relative;
  padding: 0 16px;
}
.demo-glow {
  display: none;
}
.demo-window-wrap {
  --ss: 1;
  position: relative;
  height: calc(740px * var(--cs, var(--ss)));
}
.demo-window-wrap > .sw {
  position: absolute;
  left: 50%;
  top: 0;
  margin-left: -600px;
  transform: scale(var(--cs, var(--ss)));
  transform-origin: 50% 0;
}
/* JS-off fallback scale steps; with JS, --cs fits the container exactly. */
@media (max-width: 1240px) {
  .demo-window-wrap {
    --ss: 0.8;
  }
}
@media (max-width: 1000px) {
  .demo-window-wrap {
    --ss: 0.62;
  }
}
@media (max-width: 790px) {
  .demo-window-wrap {
    --ss: 0.5;
  }
}
@media (max-width: 640px) {
  .demo-window-wrap {
    --ss: 0.4;
  }
}
@media (max-width: 520px) {
  .demo-window-wrap {
    --ss: 0.3;
  }
}
@media (max-width: 400px) {
  .demo-window-wrap {
    --ss: 0.25;
  }
}
.demo-captions {
  list-style: none;
  max-width: 640px;
  margin: 44px auto 0;
  padding: 0 8px;
  display: grid;
  gap: 18px;
  text-align: center;
}
.demo-caption > p {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-wrap: pretty;
}
.demo-caption > p > strong {
  font-weight: 600;
  color: var(--text);
}
.demo-frame {
  display: none;
}
@media (min-width: 720px) {
  .scrolly .demo-track {
    height: 500vh;
  }
  .scrolly .demo-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    padding: 0;
  }
  .scrolly .demo-glow {
    display: block;
    position: absolute;
    left: 50%;
    top: calc(50% - 30px);
    width: 1100px;
    height: 620px;
    transform: translate(-50%, -50%) scale(var(--cs, 0.7));
    background: radial-gradient(
      closest-side,
      rgba(242, 241, 237, 0.12),
      rgba(242, 241, 237, 0)
    );
    filter: blur(50px);
    pointer-events: none;
  }
  .scrolly .demo-window-wrap {
    position: absolute;
    left: 50%;
    top: calc(50% - 30px);
    width: 1200px;
    height: 740px;
    transform: translate(-50%, -50%) scale(var(--cs, 0.7));
    will-change: transform;
  }
  .scrolly .demo-window-wrap > .sw {
    left: 0;
    margin: 0;
    transform: none;
  }
  /* Captions sit 6vh from the bottom, or just under the window when the
     window reaches lower than that (tall viewports), so light caption text
     never runs over the light window. */
  .scrolly .demo-captions {
    position: absolute;
    left: 0;
    right: 0;
    top: max(
      calc(100% - 6vh - 90px),
      calc(50% - 30px + 370px * var(--cs, 0.7) + 16px)
    );
    height: 90px;
    max-width: none;
    margin: 0;
    padding: 0 24px;
    display: block;
  }
  .scrolly .demo-caption {
    position: absolute;
    left: 50%;
    top: 0;
    width: min(640px, calc(100% - 48px));
    opacity: var(--k);
    transform: translate(-50%, calc((1 - var(--k)) * 8px));
  }
  .scrolly .demo-caption-1 {
    --k: var(--k1, 1);
  }
  .scrolly .demo-caption-2 {
    --k: var(--k2, 0);
  }
  .scrolly .demo-caption-3 {
    --k: var(--k3, 0);
  }
  .scrolly .demo-caption-4 {
    --k: var(--k4, 0);
  }
}
@media (max-width: 719.98px) {
  .js .demo-glow,
  .js .demo-window-wrap {
    display: none;
  }
  .js .demo-captions {
    max-width: 560px;
    margin-top: 0;
    gap: 48px;
  }
  .js .demo-frame {
    display: block;
    position: relative;
    height: calc(var(--rh) * var(--fs) * 1px);
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 14px;
    background: #f4f5f7;
    box-shadow:
      0 0 0 1px rgba(242, 241, 237, 0.16),
      0 30px 80px -30px rgba(0, 0, 0, 0.9);
  }
  /* A narrower transcript inside the frames: text reflows instead of being
     scaled down to an unreadable size. */
  .js .demo-frame .sw-column {
    max-width: 420px;
  }
  .js .demo-frame > .sw {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 0;
    box-shadow: none;
    transform-origin: 0 0;
    transform: scale(var(--fs))
      translate(calc(var(--rx) * -1px), calc(var(--ry) * -1px));
  }
}

/* The demo window: an HTML rebuild of the Atum desktop shell, light theme,
   matched to the shipped app (roster sections, typing dots, file card, native
   confirm sheet). Scene variables default to 1, the final state. */
.sw {
  position: relative;
  width: 1200px;
  height: 740px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(
    1200px 760px at 18% -10%,
    #fbfbfc 0%,
    #f4f5f7 50%,
    #eef0f3 100%
  );
  box-shadow:
    0 0 0 1px rgba(242, 241, 237, 0.16),
    0 50px 140px -30px rgba(0, 0, 0, 0.9);
  color: #1b1d22;
  font-family:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
    Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: normal;
  letter-spacing: normal;
  text-align: left;
  user-select: none;
}
.sw-sidebar {
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 248px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 0.5px rgba(23, 25, 31, 0.07),
    0 10px 30px -14px rgba(23, 25, 31, 0.22);
  padding: 14px 8px 8px;
  display: flex;
  flex-direction: column;
}
.sw-sidebar-top {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}
.sw-lights {
  display: flex;
  gap: 8px;
}
.sw-icon-panel {
  width: 14px;
  height: 12px;
  border: 1.5px solid #9096a0;
  border-radius: 3px;
}
.sw-search-row {
  margin: 12px 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sw-search {
  flex: 1;
  min-width: 0;
  height: 34px;
  border-radius: 17px;
  background: rgba(23, 25, 31, 0.05);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  font-size: 13px;
  color: #9096a0;
  white-space: nowrap;
}
.sw-icon-search {
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid #9096a0;
  border-radius: 50%;
}
.sw-plus {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #1b1d22;
  color: #f4f5f7;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}
.sw-label {
  margin: 16px 12px 6px;
  font-size: 12px;
  font-weight: 500;
  color: #8a9099;
}
.sw-row {
  margin: 0 4px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}
.sw-row-current {
  border-radius: 10px;
  background: rgba(23, 25, 31, 0.06);
}
.sw-tile {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
}
.sw-tile-atum,
.sw-tile-small {
  background: #0b0b0a;
  display: grid;
  place-items: center;
}
.sw-tile-small {
  width: 22px;
  height: 22px;
  border-radius: 6px;
}
.sw-tile-letter {
  background: #dfe2e6;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #5f646d;
}
.sw-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sw-row-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sw-row-name {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-row-sub {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  color: #5f646d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-row-time {
  flex: none;
  font-size: 11px;
  color: #9096a0;
}
/* The Atum row previews the last message: yours, then Atum's answer. */
.sw-row-swap {
  display: grid;
}
.sw-row-swap > span {
  grid-area: 1 / 1;
}
.sw-row-before {
  opacity: calc(1 - var(--a, 1));
}
.sw-row-after {
  opacity: var(--a, 1);
}
.sw-badge {
  flex: none;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #1b1d22;
  color: #f4f5f7;
  font-size: 11px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
.sw-new {
  margin: 4px 4px 0;
  height: 36px;
  border-radius: 10px;
  background: rgba(23, 25, 31, 0.04);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  font-size: 13px;
  color: #3b3f47;
}
.sw-new > span {
  font-size: 17px;
  line-height: 1;
  color: #5f646d;
}
.sw-main {
  position: absolute;
  left: 268px;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}
.sw-header {
  flex: none;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px 0 24px;
}
.sw-header-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
}
.sw-header-more {
  font-size: 16px;
  color: #5f646d;
  letter-spacing: 1px;
}
/* One long conversation per assistant: the transcript sits on the composer
   and earlier messages run up under the header. */
.sw-transcript {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 32px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 72px);
}
.sw-column {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sw-column > .sw-earlier {
  color: #5f646d;
}
/* As each message arrives the transcript scrolls up by its height; site.js
   measures the offset (--sy, window pixels). */
.scrolly .demo-window-wrap .sw-column {
  transform: translateY(calc(var(--sy, 0) * 1px));
}
.sw-user {
  align-self: flex-end;
  max-width: 78%;
  border-radius: 18px;
  background: rgba(23, 25, 31, 0.05);
  padding: 10px 16px;
  font-size: 15px;
  line-height: 1.6;
}
.sw-request {
  opacity: var(--u, 1);
  transform: translateY(calc((1 - var(--u, 1)) * 14px));
}
/* While Atum works the chat shows only its name and typing dots; the answer
   then takes their place. */
.sw-answer {
  display: grid;
  align-items: start;
}
.sw-answer > * {
  grid-area: 1 / 1;
}
.sw-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #5f646d;
  opacity: calc(var(--ty, 1) * (1 - var(--a, 1)));
}
.sw-typing-name {
  font-weight: 500;
}
.sw-typing-dots {
  display: flex;
  gap: 4px;
  border-radius: 12px;
  background: rgba(23, 25, 31, 0.05);
  padding: 9px 11px;
}
.sw-typing-dots > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9096a0;
}
.scrolly .sw-typing-dots > span {
  animation: sw-typing 1.2s ease-in-out infinite;
}
.scrolly .sw-typing-dots > span:nth-child(2) {
  animation-delay: 0.15s;
}
.scrolly .sw-typing-dots > span:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes sw-typing {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-2px);
  }
}
.sw-reply {
  font-size: 15px;
  line-height: 1.6;
  color: #1b1d22;
}
.sw-answer > .sw-reply {
  opacity: var(--a, 1);
  transform: translateY(calc((1 - var(--a, 1)) * 10px));
}
.sw-file {
  align-self: flex-start;
  width: 340px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 0.5px rgba(23, 25, 31, 0.08);
  padding: 12px 12px 12px 14px;
  opacity: var(--f, 1);
  transform: translateY(calc((1 - var(--f, 1)) * 10px));
}
.sw-file-icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(23, 25, 31, 0.05);
  color: #5f646d;
  display: grid;
  place-items: center;
}
.sw-file-text {
  flex: 1;
  min-width: 0;
}
.sw-file-name {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sw-file-meta {
  display: block;
  margin-top: 1px;
  font-size: 12px;
  color: #5f646d;
}
.sw-file-save {
  position: relative;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(23, 25, 31, 0.05);
  color: #3b3f47;
  display: grid;
  place-items: center;
}
/* Hover label of the Save button; shown only mid-scene, never at rest. */
.sw-file-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  border-radius: 7px;
  background: #1b1d22;
  color: #f4f5f7;
  padding: 5px 9px;
  font-size: 11.5px;
  white-space: nowrap;
  opacity: 0;
}
.scrolly .sw-file-tip,
.demo-frame .sw-file-tip {
  opacity: var(--tt, 0);
}
.sw-composer-row {
  flex: none;
  padding: 0 32px 18px;
}
.sw-composer {
  max-width: 620px;
  min-height: 56px;
  margin: 0 auto;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 0.5px rgba(23, 25, 31, 0.07),
    0 12px 32px -14px rgba(23, 25, 31, 0.28);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
}
.sw-composer-add {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(23, 25, 31, 0.05);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: #5f646d;
}
.sw-composer-placeholder {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: #9096a0;
  white-space: nowrap;
  overflow: hidden;
}
.sw-composer-mode {
  font-size: 13px;
  color: #5f646d;
  white-space: nowrap;
}
.sw-composer-send {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #1b1d22;
  color: #f4f5f7;
  display: grid;
  place-items: center;
  font-size: 15px;
}
/* The native confirmation for a Gmail send: recipient, subject, the exact
   text, then Hủy / Gửi. */
.sw-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 25, 31, 0.18);
  opacity: var(--sh, 1);
  pointer-events: none;
}
.sw-sheet {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 380px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  box-shadow:
    0 0 0 0.5px rgba(23, 25, 31, 0.08),
    0 40px 90px -30px rgba(23, 25, 31, 0.45);
  padding: 24px;
  opacity: var(--sh, 1);
  transform: translate(-50%, calc(-50% + (1 - var(--sh, 1)) * 10px));
  pointer-events: none;
}
.sw-sheet-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #0b0b0a;
  display: grid;
  place-items: center;
}
.sw-sheet-title {
  margin-top: 14px;
  font-size: 18px;
  font-weight: 600;
}
.sw-sheet-meta {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: #3b3f47;
}
.sw-sheet-meta span {
  color: #8a9099;
}
.sw-sheet-body {
  margin-top: 12px;
  border-radius: 10px;
  background: rgba(23, 25, 31, 0.04);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #3b3f47;
}
.sw-sheet-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.sw-sheet-actions > span {
  height: 36px;
  min-width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 16px;
  font-size: 13.5px;
  color: #3b3f47;
  box-shadow: inset 0 0 0 1px rgba(23, 25, 31, 0.12);
}
.sw-sheet-actions > .sw-sheet-send {
  background: #1b1d22;
  color: #f4f5f7;
  font-weight: 500;
  box-shadow: none;
}

/* 3. Product gallery. */
.gallery {
  padding: 18vh 24px 0;
}
.gallery-tabs {
  margin-top: 40px;
}
.gallery-window {
  position: relative;
  max-width: 1080px;
  margin: 40px auto 0;
  transform: scale(calc(0.9 + 0.1 * var(--g, 1)));
  opacity: calc(0.25 + 0.75 * var(--g, 1));
}
.gallery-window .product-glow {
  top: 25%;
  bottom: -8%;
  background: radial-gradient(
    closest-side,
    rgba(242, 241, 237, 0.14),
    rgba(242, 241, 237, 0)
  );
}
/* Without JS the three captures stack, each readable; with JS they share
   one frame and crossfade. */
.gallery-images {
  position: relative;
  display: grid;
  gap: 1px;
  background: rgba(23, 25, 31, 0.07);
}
.js .gallery-images {
  display: block;
  aspect-ratio: 16 / 9;
}
.js .gallery-images img {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s;
}
.js .gallery-images img.is-active {
  opacity: 1;
}
.gallery-captions {
  max-width: 1080px;
  margin: 28px auto 0;
  text-align: center;
}
.gallery-captions p {
  font-size: 17px;
  color: var(--text);
}

/* 4. Store. */
.store {
  padding: 24vh 24px 0;
}
.store-grid {
  max-width: 1080px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
  gap: 24px;
}
.store-card {
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.store-card h3 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.store-card p {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}
.store-shot {
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(242, 241, 237, 0.12),
    0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
.store-shot img {
  width: 100%;
  height: auto;
}
.store .screen-note {
  margin-top: 20px;
}

/* 5. AI company. Static: the statement is fully lit. Scrolly: 240vh with a
   sticky statement; site.js wraps words and gives each a threshold --t. */
.company {
  padding-top: 18vh;
}
.co-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px 88px;
}
.co-copy {
  max-width: 1000px;
}
.co-copy .eyebrow {
  margin-bottom: 18px;
}
.co-statement {
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--text);
  text-wrap: pretty;
}
.scrolly .co-track {
  height: 240vh;
}
.scrolly .co-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 0 24px;
}
.scrolly .co-word {
  opacity: clamp(0.18, calc((var(--co, 0) - var(--t, 0)) * 14 + 0.18), 1);
}
.org {
  max-width: 1128px;
  margin: 0 auto;
  padding: 0 24px;
}
.org-founder {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.org-you {
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.org-line {
  width: 1px;
  height: 48px;
  background: var(--line-strong);
}
.org-roles {
  border-top: 1px solid var(--line-strong);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0 24px;
}
.org-role {
  padding-top: 28px;
}
.org-role h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.org-role p {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
}
.org-cta {
  margin-top: 44px;
  text-align: center;
}
.org-cta .text-link {
  font-size: 17px;
}

/* 6. Made for Vietnam. */
.vietnam {
  padding: 26vh 24px 0;
}
.vietnam-grid {
  max-width: 1080px;
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.vietnam-card {
  min-height: 380px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}
.specimen {
  font-size: clamp(32px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.specimen-number {
  font-variant-numeric: tabular-nums;
}
.vietnam-card h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.vietnam-card h3 + p {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  text-wrap: pretty;
}

/* 7. Control. */
.control {
  max-width: 1128px;
  margin: 0 auto;
  padding: 24vh 24px 0;
}
.control h2 {
  max-width: 760px;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.control-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 40px 32px;
}
.control-item {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.control-item h3 {
  font-size: 19px;
  font-weight: 600;
}
.control-item p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.control-item .text-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 16px;
}

/* 8. iPhone, coming soon. */
.iphone {
  padding: 26vh 24px 0;
}
.iphone-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 56px;
  align-items: center;
}
.iphone h2 {
  margin-top: 12px;
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
.iphone .lead {
  margin-top: 22px;
  max-width: 420px;
}
.phone-wrap {
  display: flex;
  justify-content: center;
  transform: translateY(calc((1 - var(--ip, 1)) * 90px));
  opacity: calc(0.2 + 0.8 * var(--ip, 1));
}
.phone {
  position: relative;
  flex: none;
  width: 300px;
  height: 620px;
  border-radius: 56px;
  background: #1c1c1b;
  padding: 11px;
  box-shadow:
    0 0 0 1px rgba(242, 241, 237, 0.14),
    inset 0 0 0 2px #2a2a28,
    0 60px 120px -40px rgba(0, 0, 0, 0.9);
}
.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 46px;
  overflow: hidden;
  background:
    radial-gradient(
      420px 360px at 70% 8%,
      rgba(242, 241, 237, 0.22),
      rgba(242, 241, 237, 0) 70%
    ),
    #0b0b0a;
}
.phone-island {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 96px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: #000;
}
.phone-clock {
  position: absolute;
  left: 0;
  right: 0;
  top: 76px;
  text-align: center;
}
.phone-date {
  font-size: 16px;
  font-weight: 500;
  color: rgba(242, 241, 237, 0.8);
}
.phone-time {
  margin-top: 2px;
  font-size: 78px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.phone-note {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 110px;
  border-radius: 22px;
  background: rgba(242, 241, 237, 0.13);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}
.phone-note-tile {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #0b0b0a;
  box-shadow: 0 0 0 0.5px rgba(242, 241, 237, 0.25);
  display: grid;
  place-items: center;
}
.phone-note-body {
  flex: 1;
  min-width: 0;
}
.phone-note-head {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.phone-note-head strong {
  font-weight: 600;
}
.phone-note-head span {
  color: rgba(242, 241, 237, 0.6);
}
.phone-note-text {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  color: rgba(242, 241, 237, 0.9);
}
.phone-home {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 110px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: rgba(242, 241, 237, 0.7);
}

/* 9. Download CTA: Mac today, iPhone coming soon beside it. */
.cta {
  position: relative;
  padding: 30vh 24px 22vh;
  text-align: center;
  overflow: hidden;
}
.cta-glow {
  position: absolute;
  left: 50%;
  top: 30vh;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -30%);
  background: radial-gradient(
    closest-side,
    rgba(242, 241, 237, 0.1),
    rgba(242, 241, 237, 0)
  );
  pointer-events: none;
}
.cta-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta-mark {
  overflow: visible;
}
.cta h2 {
  margin-top: 36px;
  font-size: clamp(44px, 6.6vw, 92px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.cta-platforms {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.soon-chip,
.coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  white-space: nowrap;
}
.soon-chip {
  min-height: 48px;
  padding: 0 22px;
  font-size: 15px;
}
.soon-chip > span:first-of-type {
  color: var(--text);
  font-weight: 500;
}
.cta-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--faint);
}

/* 10. Footer. */
.footer {
  border-top: 1px solid rgba(242, 241, 237, 0.08);
}
.footer-inner {
  max-width: 1128px;
  margin: 0 auto;
  padding: 36px 24px 44px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer .wordmark {
  font-size: 18px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-size: 12.5px;
}
.footer-links a {
  color: var(--muted);
  transition: color 0.2s;
}
.footer-links a:hover {
  color: var(--text);
}
.legal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--faint);
}
.legal > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.legal > .legal-bottom {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.motion-toggle {
  border: 0;
  border-radius: 999px;
  padding: 5px 12px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted);
  font-size: 11.5px;
  transition: color 0.2s;
}
.motion-toggle:hover {
  color: var(--text);
}
/* The label names the action: "Tắt…" while motion runs, "Bật…" when paused. */
.motion-label-off,
.motion-icon-play,
.motion-paused .motion-label-on,
.motion-paused .motion-icon-pause {
  display: none;
}
.motion-paused .motion-label-off {
  display: inline;
}
.motion-paused .motion-icon-play {
  display: block;
}
/* Hero copy of the control: a round icon button in the first screen's
   corner, so motion can be paused before the scroll scenes start. */
.hero-motion {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 32px;
  height: 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Download page: the CTA's eclipse and glow, then Mac and iPhone side by
   side (stacked on narrow screens). Each card opens with its device: the
   real Mac window, and the homepage's CSS phone for iPhone (coming soon). */
/* Compact enough that the DMG button and the iPhone "coming soon" label sit
   above the fold on a 1440×900 laptop. */
.dl-hero {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h) + 5vh) 24px 0;
  text-align: center;
}
.dl-glow {
  position: absolute;
  left: 50%;
  top: calc(var(--nav-h) + 5vh + 40px);
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    closest-side,
    rgba(242, 241, 237, 0.1),
    rgba(242, 241, 237, 0)
  );
  pointer-events: none;
}
.dl-mark {
  position: relative;
  margin: 0 auto;
  overflow: visible;
}
.dl-hero > :not(.dl-glow) {
  position: relative;
}
.dl-hero .eyebrow {
  margin-top: 20px;
}
.dl-hero h1 {
  margin-top: 12px;
  font-size: clamp(40px, 5.4vw, 72px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.dl-hero .lead {
  margin: 16px auto 0;
}
.platforms {
  max-width: 880px;
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 20px;
  text-align: left;
}
.platform {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.platform-visual {
  position: relative;
  flex: none;
  height: 188px;
  overflow: hidden;
  background: radial-gradient(
    60% 90% at 50% 100%,
    rgba(242, 241, 237, 0.09),
    rgba(242, 241, 237, 0)
  );
  border-bottom: 1px solid var(--line-soft);
}
.platform-visual-mac .mac-window {
  position: absolute;
  left: 50%;
  top: 32px;
  width: min(380px, calc(100% - 48px));
  transform: translateX(-50%);
  box-shadow:
    0 0 0 1px rgba(242, 241, 237, 0.16),
    0 30px 80px -30px rgba(0, 0, 0, 0.9);
}
.platform-visual-phone .phone {
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%) scale(0.6);
  transform-origin: 50% 0;
}
/* In the card the clock and the notification move up, so the whole
   notification shows above the crop (188px at every width). */
.platform-visual-phone .phone-clock {
  top: 60px;
}
.platform-visual-phone .phone-note {
  top: 168px;
  bottom: auto;
}
.platform-soon .platform-visual-phone .phone {
  opacity: 0.92;
}
.platform-body {
  flex: 1;
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.platform-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.platform-glyph {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px var(--line);
}
.platform h2 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.platform-text {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}
.platform .pill {
  margin-top: 6px;
}
.release-meta {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.preview-note {
  font-size: 13px;
  color: var(--faint);
}
.latest-link {
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.coming-badge {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.install {
  max-width: 1128px;
  margin: 0 auto;
  padding: 22vh 24px 0;
}
.install-steps {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}
.install-steps > li {
  padding: 32px;
}
.step-number {
  font-size: 13px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.install-art {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
}
.install-steps h3 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.install-steps p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.dmg-art {
  flex-direction: column;
  gap: 10px;
}
.dmg-art > span {
  padding: 16px 22px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 26px;
  color: var(--text);
}
.dmg-art small {
  font-size: 12px;
  color: var(--faint);
}
.folder-shape {
  position: relative;
  width: 72px;
  height: 54px;
  border-radius: 6px;
  background: #2a2a28;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 20px;
}
.folder-shape::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 28px;
  height: 9px;
  border-radius: 4px 5px 0 0;
  background: #2a2a28;
}
.ready-art > span {
  color: var(--text);
  font-size: 22px;
  transform: translateY(-30px);
}
.faq {
  max-width: 1128px;
  margin: 0 auto;
  padding: 22vh 24px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 40px 64px;
}
.faq h2 {
  margin-top: 12px;
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary > span:last-child {
  color: var(--muted);
  transition: transform 0.2s;
}
.faq-list details[open] summary > span:last-child {
  transform: rotate(45deg);
}
.faq-list p {
  padding-bottom: 22px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}
.faq-list a,
.download-terms a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.download-terms {
  max-width: 1128px;
  margin: 0 auto;
  padding: 14vh 24px 64px;
  text-align: center;
  font-size: 13px;
  color: var(--faint);
}
.download-terms a {
  color: var(--muted);
}

/* Responsive. */
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
  .faq {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 719.98px) {
  .store-card,
  .vietnam-card,
  .platform-body,
  .install-steps > li {
    padding: 28px 24px;
  }
  /* On phones the CTA row fills the bottom edge; the pause button moves to
     the top corner, under the nav. */
  .hero-motion {
    top: calc(var(--nav-h) + 12px);
    right: 16px;
    bottom: auto;
  }
  .vietnam-card {
    min-height: 300px;
  }
  .store-card h3 {
    font-size: 24px;
  }
  .footer-top {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Motion preferences. The scroll scenes themselves are gated by `.scrolly`,
   which site.js never sets under reduced motion or the pause control. */
.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  /* Scenes never run here, so the hero's pause button has nothing to do;
     the footer control stays. */
  .hero-motion {
    display: none;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
@media print {
  .site-header,
  .motion-toggle,
  .lang-switch {
    display: none;
  }
}