/* Rukoo Mail landing page.
   One theme (dark), one accent family: the iridescent green-to-magenta of the pigeon's neck.
   Radius rule: interactive controls are pills, panels 16px, the app window 14px, keycaps 8px. */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-opsz-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-ext-opsz-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #08090a;
  --bg-2: #0d0e10;
  --panel: #111215;
  --panel-2: #17181c;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-3: rgba(255, 255, 255, 0.2);
  --text: #f7f8f8;
  --text-2: #a1a6af;
  --text-3: #858a93;
  --green: #16f0a3;
  --magenta: #bd2dc4;
  --eye: #ff7a1a;
  --neck: linear-gradient(110deg, #16f0a3 0%, #52d9c7 30%, #8d62e0 66%, #bd2dc4 100%);
  --r-pill: 999px;
  --r-panel: 16px;
  --r-frame: 14px;
  --r-key: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 32px);
  /* z-index scale: content 1, peeking bird 0 under the frame, nav 50, skip link 100 */
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-optical-sizing: auto;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}
.icon {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
}
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- type ---------- */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 620;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.04;
}
h3 {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
p {
  margin: 0;
  text-wrap: pretty;
}
.lede {
  font-size: clamp(18px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 40ch;
}
.body {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 54ch;
}
.caption {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-3);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-2);
}
.eyebrow .icon {
  width: 16px;
  height: 16px;
}
kbd,
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(#1c1d21, #141518);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font: 500 12.5px/1 'Inter', system-ui, sans-serif;
  color: var(--text);
}

/* ---------- buttons and chips ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 560;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: transform 160ms var(--ease-out), background-color 200ms, box-shadow 300ms var(--ease-out), border-color 200ms;
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  background: var(--text);
  color: #0a0b0d;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 6px 24px -10px rgba(255, 255, 255, 0.35);
}
/* The neck sheen: a strip of the pigeon's iridescence passes over the button on hover. */
.btn-primary::after {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(22, 240, 163, 0.55) 38%, rgba(141, 98, 224, 0.5) 52%, rgba(189, 45, 196, 0.45) 62%, transparent 80%);
  transform: translateX(-110%);
  opacity: 0;
}
@media (hover: hover) {
  .btn-primary:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 10px 40px -12px rgba(22, 240, 163, 0.55), 0 10px 50px -14px rgba(189, 45, 196, 0.55);
  }
  .btn-primary:hover::after {
    opacity: 1;
    transform: translateX(110%);
    transition: transform 900ms var(--ease-out), opacity 200ms;
  }
  .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--line-3);
  }
}
.btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-2);
  color: var(--text);
}
.btn-sm {
  height: 36px;
  padding: 0 14px;
  font-size: 14px;
  gap: 7px;
}
.btn-sm .icon {
  width: 16px;
  height: 16px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.025);
  font-size: 13.5px;
  color: var(--text-2);
  white-space: nowrap;
}

/* ---------- nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 64px;
  border-bottom: 1px solid transparent;
  transition: background-color 300ms, border-color 300ms, backdrop-filter 300ms;
}
.nav.scrolled {
  background: rgba(8, 9, 10, 0.72);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}
.nav .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}
.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand svg {
  height: 26px;
  width: auto;
}
.nav-links {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-links a {
  display: inline-flex;
  height: 34px;
  align-items: center;
  padding: 0 12px;
  border-radius: var(--r-pill);
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  transition: color 150ms, background-color 150ms;
}
.nav-links a:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
}
.nav-end {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 860px) {
  .nav-links {
    display: none;
  }
}
@media (max-width: 480px) {
  .nav-end .btn-ghost .label {
    display: none;
  }
  .nav-end .btn-ghost {
    width: 36px;
    padding: 0;
  }
}

/* ---------- pigeon ---------- */

.pg-eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 90ms ease-in;
}
.pg-eye.blink {
  transform: scaleY(0.08);
}
.pg-pupil {
  will-change: transform;
}
.pigeon {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: 0;
  padding: 0;
}
.pigeon svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.pigeon .pg-bird {
  transform-box: fill-box;
  transform-origin: 50% 90%;
}
.pigeon.bob .pg-bird {
  animation: bob 520ms var(--ease-out);
}
.pigeon.bob .pg-neck {
  animation: shimmer 900ms ease-out;
}
@keyframes bob {
  0% {
    transform: none;
  }
  25% {
    transform: translate(9%, 2%) rotate(7deg);
  }
  50% {
    transform: translate(-3%, 0) rotate(-3deg);
  }
  72% {
    transform: translate(5%, 1%) rotate(4deg);
  }
  100% {
    transform: none;
  }
}
@keyframes shimmer {
  50% {
    filter: hue-rotate(-40deg) saturate(1.3) brightness(1.15);
  }
}
.coo {
  position: absolute;
  left: -18%;
  top: -6%;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--text);
  color: #0a0b0d;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px) scale(0.85);
  transform-origin: 100% 100%;
  transition: opacity 180ms, transform 380ms var(--ease-spring);
}
.coo.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .pigeon.bob .pg-bird,
  .pigeon.bob .pg-neck {
    animation: none;
  }
  .pg-eye {
    transition: none;
  }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: 132px;
  overflow: clip;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto;
  height: 900px;
  background:
    radial-gradient(40% 50% at 22% 12%, rgba(22, 240, 163, 0.075), transparent 70%),
    radial-gradient(38% 46% at 82% 18%, rgba(189, 45, 196, 0.085), transparent 70%),
    radial-gradient(60% 40% at 50% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
  pointer-events: none;
}
.hero-copy {
  position: relative;
  display: grid;
  gap: 24px;
  justify-items: start;
}
.hero h1 {
  font-size: clamp(50px, 8.4vw, 104px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 640;
  padding-bottom: 0.06em;
  background: linear-gradient(180deg, #ffffff 30%, rgba(247, 248, 248, 0.62));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .lede {
  max-width: 36ch;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.stage {
  position: relative;
  margin-top: 80px;
  perspective: 1800px;
}
.stage-inner {
  position: relative;
  transform-origin: 50% 0%;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage-inner {
      animation: flatten linear both;
      animation-timeline: scroll(root);
      animation-range: 0 75vh;
    }
  }
}
@keyframes flatten {
  from {
    transform: rotateX(18deg) scale(0.93) translateY(-10px);
  }
  to {
    transform: none;
  }
}
.stage-glow {
  position: absolute;
  inset: 6% 4% 0;
  background:
    radial-gradient(50% 50% at 30% 40%, rgba(22, 240, 163, 0.22), transparent 70%),
    radial-gradient(50% 50% at 72% 40%, rgba(189, 45, 196, 0.24), transparent 70%);
  filter: blur(60px);
  opacity: 0.55;
  pointer-events: none;
}
.frame {
  position: relative;
  z-index: 1;
  border-radius: var(--r-frame);
  background: #141519;
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 50px 140px -30px rgba(0, 0, 0, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.frame img {
  width: 100%;
  height: auto;
}
.frame picture + picture {
  position: absolute;
  inset: 0;
}
.frame picture {
  transition: opacity 450ms var(--ease-out);
}
.frame .is-hidden {
  opacity: 0;
}
.hero-stage .frame {
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.peek {
  position: absolute;
  z-index: 0;
  right: 11%;
  top: 0;
  width: clamp(72px, 9vw, 116px);
  transform: translateY(-70%);
}
.peek .pigeon {
  width: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .peek {
    animation: peek-in 900ms var(--ease-spring) 1.3s both;
  }
}
@keyframes peek-in {
  from {
    transform: translateY(5%);
  }
  to {
    transform: translateY(-70%);
  }
}
.stage-tools {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  margin-top: -54px;
  padding-right: 18px;
}
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-pill);
  background: rgba(14, 15, 17, 0.85);
  border: 1px solid var(--line-2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}
.seg button .icon {
  width: 15px;
  height: 15px;
}
.seg button[aria-pressed='true'] {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* load-in */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    animation: rise 900ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 90ms + 80ms);
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ---------- sections ---------- */

.section {
  position: relative;
  padding-block: clamp(88px, 12vw, 152px);
}
.section-head {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.reveal {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js .reveal.in {
    opacity: 1;
    transform: none;
  }
}
.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}

/* inbox: text beside an interactive crop of the list */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.split-copy {
  display: grid;
  gap: 22px;
  align-content: center;
}
.split.reverse {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.split.reverse .split-media {
  order: -1;
}
@media (max-width: 860px) {
  .split,
  .split.reverse {
    grid-template-columns: 1fr;
  }
  .split.reverse .split-media {
    order: 0;
  }
}
.shot {
  position: relative;
  border-radius: var(--r-panel);
  border: 1px solid var(--line-2);
  background: #141519;
  overflow: hidden;
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.shot img {
  width: 100%;
  height: auto;
}
.list-shot {
  max-width: 520px;
  margin-left: auto;
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
  mask-image: linear-gradient(180deg, #000 80%, transparent);
}
.list-shot picture {
  transition: opacity 420ms var(--ease-out);
}
.list-shot picture + picture {
  position: absolute;
  inset: 0;
}
.list-shot [data-state] {
  opacity: 0;
}
.list-shot[data-open='false'] [data-state='folded'],
.list-shot[data-open='true'] [data-state='open'] {
  opacity: 1;
}
.hotspot {
  position: absolute;
  left: 87.4%;
  top: 62%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: var(--r-pill);
  border: 0;
  background: none;
  cursor: pointer;
}
.hotspot::before,
.hotspot::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: inherit;
  border: 1.5px solid var(--green);
}
.hotspot::after {
  border-color: rgba(22, 240, 163, 0.5);
}
@media (prefers-reduced-motion: no-preference) {
  .hotspot::after {
    animation: ping 2.2s var(--ease-out) infinite;
  }
}
.list-shot[data-open='true'] .hotspot::after {
  animation: none;
  opacity: 0;
}
@keyframes ping {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  70%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.toggle-line {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* writing: bento */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto;
  gap: 16px;
}
.cell {
  position: relative;
  border-radius: var(--r-panel);
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.cell-a {
  grid-row: span 2;
  background: #141519;
}
.cell-a img {
  width: 100%;
  height: auto;
}
.cell-tint {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(22, 240, 163, 0.07), transparent 60%),
    radial-gradient(120% 90% at 100% 100%, rgba(189, 45, 196, 0.08), transparent 60%),
    var(--panel);
}
.cell-media {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 32px) 12px;
}
.cell-media img {
  height: auto;
  border-radius: 12px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cell-format img {
  width: 100%;
  max-width: 520px;
}
.cell-attach img {
  width: 86%;
  max-width: 340px;
}
.cell-cap {
  padding: 14px 24px 22px;
  font-size: 15px;
  color: var(--text-2);
}
.cell-cap strong {
  color: var(--text);
  font-weight: 560;
}
@media (max-width: 860px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .cell-a {
    grid-row: auto;
  }
}

/* agents */
.agents-head {
  display: grid;
  gap: 20px;
  margin-bottom: 48px;
}
.agent-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-top: 6px;
}
.agent-row .with {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.agent-row .chip {
  color: var(--text);
}
.shortcut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-2);
}
.shortcut .kbds {
  display: inline-flex;
  gap: 4px;
  margin-right: 4px;
}
.after-demo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.actions-strip {
  margin-top: 56px;
  display: grid;
  gap: 14px;
}
.actions-strip .label {
  font-size: 14px;
  color: var(--text-3);
}
.actions-strip .chip {
  color: var(--text);
  height: 34px;
  padding: 0 14px;
  font-size: 14px;
}
.actions-strip .chip .icon {
  width: 15px;
  height: 15px;
  color: var(--green);
}
.approvals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  margin-top: clamp(64px, 8vw, 104px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--line);
}
.approvals > div {
  display: grid;
  gap: 14px;
  align-content: start;
}
.fact {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 14px;
  align-items: start;
}
.fact .badge {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
}
.fact .badge .icon {
  width: 20px;
  height: 20px;
}
.fact strong {
  font-weight: 580;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.fact p {
  color: var(--text-2);
  font-size: 15.5px;
}
@media (max-width: 860px) {
  .approvals {
    grid-template-columns: 1fr;
  }
}

/* ---------- the agent demo: a working replica of Rukoo's chat panel ---------- */

.demo {
  --a-bg: #141519;
  --a-panel: #1b1c21;
  --a-panel-2: #212228;
  --a-raised: #25262d;
  --a-border: #2a2c33;
  --a-border-strong: #3a3d47;
  --a-chip: #2a2c34;
  --a-text: #ecedf1;
  --a-text-2: #a7adba;
  --a-text-3: #9097a4;
  --a-link: #8ab0ff;
  --a-primary: #e9ecf5;
  --a-on-primary: #15171c;
  --a-ok: #4ccf8b;
  position: relative;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--a-text);
}
.demo-win {
  position: relative;
  display: grid;
  grid-template-rows: 46px 1fr;
  height: 660px;
  border-radius: var(--r-frame);
  background: var(--a-bg);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 60px 140px -40px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.demo-glow {
  position: absolute;
  inset: 10% 8% -4%;
  background:
    radial-gradient(40% 50% at 70% 50%, rgba(189, 45, 196, 0.2), transparent 70%),
    radial-gradient(40% 50% at 30% 60%, rgba(22, 240, 163, 0.14), transparent 70%);
  filter: blur(70px);
  pointer-events: none;
}
.demo .ic {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex: none;
}
.demo-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 14px;
}
.demo-bar .mini {
  width: 20px;
}
.demo-search {
  flex: 0 1 46%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--a-panel-2);
  color: var(--a-text-3);
}
.demo-spark {
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--a-raised);
  color: var(--a-text);
}
.demo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 388px;
  min-height: 0;
}
.demo-mail {
  position: relative;
  min-height: 0;
  border-top: 1px solid var(--a-border);
  border-right: 1px solid var(--a-border);
  border-top-right-radius: 12px;
  background: var(--a-panel);
  overflow: hidden;
}
.demo-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out), visibility 0s;
}
.demo-pane[hidden] {
  display: flex;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 380ms var(--ease-out), transform 480ms var(--ease-out), visibility 0s linear 480ms;
}
.demo-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 52px;
  padding: 0 22px;
  border-bottom: 1px solid var(--a-border);
  color: var(--a-text-2);
  flex: none;
}
.demo-tools .reply {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--a-text);
  font-weight: 560;
  font-size: 13.5px;
}
.demo-tools .sep {
  width: 1px;
  height: 18px;
  background: var(--a-border);
}
.demo-tools .end {
  margin-left: auto;
  display: flex;
  gap: 16px;
}
.demo-read {
  padding: 22px 32px;
  overflow: hidden;
}
.demo-subject {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.demo-from {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 0 12px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--a-border);
}
.av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #4a2a64;
  color: #f1e6ff;
  font-weight: 650;
  font-size: 14px;
}
.av.sm {
  width: 20px;
  height: 20px;
  font-size: 9px;
}
.demo-from b {
  font-weight: 620;
  font-size: 14.5px;
  display: block;
}
.demo-from span {
  color: var(--a-text-2);
}
.demo-from time {
  color: var(--a-text-3);
  align-self: start;
}
.demo-attach {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 18px;
  padding: 7px 14px 7px 7px;
  border-radius: 10px;
  border: 1px solid var(--a-border);
  background: var(--a-panel-2);
}
.demo-attach .pdf {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: #c8363b;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}
.demo-attach b {
  display: block;
  font-weight: 560;
}
.demo-attach span {
  color: var(--a-text-3);
  font-size: 12px;
}
.demo-text {
  font-size: 14.5px;
  line-height: 1.65;
  white-space: pre-line;
  color: var(--a-text);
}
.demo-compose-head {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-bottom: 1px solid var(--a-border);
  font-weight: 620;
  font-size: 14px;
  flex: none;
}
.demo-fields {
  padding: 0 28px;
}
.demo-field {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--a-border);
}
.demo-field > span:first-child {
  color: var(--a-text-2);
}
.to-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--a-chip);
  justify-self: start;
}
.to-chip .ic {
  width: 11px;
  height: 11px;
  color: var(--a-text-3);
}
.demo-editor {
  flex: 1;
  overflow: hidden;
  padding: 20px 28px;
  font-size: 14.5px;
  line-height: 1.65;
  white-space: pre-wrap;
  min-height: 0;
}
.caret {
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--a-text);
}
@media (prefers-reduced-motion: no-preference) {
  .caret {
    animation: caret 1s steps(1) infinite;
  }
}
@keyframes caret {
  50% {
    opacity: 0;
  }
}
.demo-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 58px;
  padding: 0 14px 0 22px;
  border-top: 1px solid var(--a-border);
  color: var(--a-text-2);
  flex: none;
}
.drafted {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--a-text-2);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 300ms, transform 400ms var(--ease-out);
}
.drafted.on {
  opacity: 1;
  transform: none;
}
.drafted a {
  color: var(--a-link);
  text-decoration: none;
  font-weight: 560;
}
.send {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 9px;
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-weight: 620;
}
.drafted + .send {
  margin-left: 0;
}
.demo-foot .send:only-of-type {
  margin-left: auto;
}

/* chat panel */
.demo-agent {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--a-bg);
}
.ap-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 14px;
  flex: none;
}
.ap-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #22355f;
  color: #b8cdfa;
  font-weight: 650;
  font-size: 12.5px;
}
.ap-who b {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 620;
  font-size: 14px;
}
.ap-who b::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--a-ok);
}
.ap-who span {
  color: var(--a-text-3);
  font-size: 12.5px;
}
.ap-icons {
  margin-left: auto;
  display: flex;
  gap: 14px;
  color: var(--a-text-2);
}
.ap-log {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 6px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px);
}
.ap-log > * {
  flex: none;
}
.ap-log {
  position: relative;
}
.ap-sugg.busy {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .ap-log > * {
    animation: item-in 420ms var(--ease-out) both;
  }
}
@keyframes item-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}
.ap-user {
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 14px;
  border-radius: 14px;
  background: var(--a-raised);
  font-weight: 500;
}
.ap-user small {
  display: block;
  color: var(--a-text-3);
  font-size: 11.5px;
  font-weight: 500;
}
.ap-think {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--a-text-2);
}
.ap-think.live span {
  background: linear-gradient(90deg, var(--a-text-3) 0%, var(--a-text) 50%, var(--a-text-3) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: think 1.4s linear infinite;
}
@keyframes think {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}
.ap-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ap-tool {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--a-panel);
  border: 1px solid var(--a-border);
  font-weight: 560;
  font-size: 12px;
}
.ap-tool .ok {
  width: 13px;
  height: 13px;
  color: var(--a-ok);
}
.ap-tool .spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--a-border-strong);
  border-top-color: var(--a-text);
  animation: spin 700ms linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.ap-say {
  font-size: 13.5px;
  line-height: 1.55;
}
.ap-card {
  border-radius: 10px;
  background: var(--a-panel);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: 12px 14px;
}
.ap-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ap-card-head .pen {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(122, 165, 245, 0.15);
  color: #a9c3fa;
}
.ap-card-head .pen .ic {
  width: 14px;
  height: 14px;
}
.ap-card-head b {
  font-weight: 620;
  font-size: 13.5px;
}
.ap-card-head .acts {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.mini-btn {
  height: 28px;
  padding: 0 10px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--a-text);
  font-size: 12.5px;
  font-weight: 560;
}
.mini-btn.outline {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.ap-card .meta {
  margin-top: 6px;
  color: var(--a-text-3);
  font-size: 12px;
}
.ap-card .prev {
  margin-top: 4px;
  color: var(--a-text-2);
  font-size: 12.5px;
}
.plan-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 13.5px;
}
.count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--a-chip);
  font-size: 11.5px;
  display: inline-grid;
  place-items: center;
}
.plan {
  border-radius: 10px;
  background: var(--a-panel);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.plan-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}
.plan-row + .plan-row {
  border-top: 1px solid var(--a-border);
}
.plan-row .num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--a-border-strong);
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--a-text-2);
  transition: background-color 300ms, box-shadow 300ms;
}
.plan-row.done .num {
  background: var(--a-ok);
  box-shadow: none;
  color: #0b2617;
}
.plan-row .num .ic {
  width: 12px;
  height: 12px;
}
.plan-row .t {
  font-weight: 560;
  font-size: 12.5px;
  line-height: 1.35;
}
.plan-row .sys {
  color: var(--a-text-2);
  font-size: 12px;
}
.status {
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 11.5px;
  display: inline-grid;
  place-items: center;
  background: var(--a-chip);
  color: var(--a-text-2);
  transition: background-color 300ms, color 300ms;
}
.plan-row.done .status {
  background: rgba(76, 207, 139, 0.14);
  color: var(--a-ok);
}
.approve b {
  display: block;
  font-weight: 650;
  font-size: 14px;
  margin-bottom: 4px;
}
.approve p {
  color: var(--a-text-2);
  font-size: 12.5px;
}
.approve dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  margin: 10px 0 12px;
  font-size: 12.5px;
}
.approve dt {
  color: var(--a-text-3);
}
.approve dd {
  margin: 0;
}
.approve-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.approve-foot .wait {
  color: var(--a-text-3);
  margin-right: auto;
}
.approve-foot .wait em {
  font-style: normal;
  color: var(--a-text);
}
.approve-foot button {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  border: 0;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), box-shadow 200ms;
}
.approve-foot button:active {
  transform: scale(0.96);
}
.approve-foot .no {
  background: transparent;
  color: var(--a-text);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.approve-foot .yes {
  background: var(--a-primary);
  color: var(--a-on-primary);
}
.approve-foot .yes.nudge {
  box-shadow: 0 0 0 4px rgba(22, 240, 163, 0.25);
}
.approve.resolved .approve-foot button {
  display: none;
}
.ap-dock {
  flex: none;
  padding: 0 12px 12px;
}
.ap-sugg {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 2px 10px;
  min-height: 42px;
}
.ap-sugg button {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: var(--a-raised);
  color: var(--a-text);
  font-size: 13px;
  font-weight: 540;
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  transition: transform 140ms var(--ease-out), box-shadow 300ms, background-color 150ms;
}
.ap-sugg button:hover {
  background: #2d2f37;
}
.ap-sugg button:active,
.ap-sugg button.pressed {
  transform: scale(0.95);
}
.ap-sugg button.nudge {
  box-shadow: 0 0 0 1px rgba(22, 240, 163, 0.6), 0 0 0 5px rgba(22, 240, 163, 0.14);
}
.ap-input {
  border-radius: 12px;
  background: var(--a-panel);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09);
  padding: 8px 10px 8px;
}
.ap-ctx {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 8px 0 4px;
  border-radius: 7px;
  background: var(--a-panel-2);
  font-size: 12.5px;
}
.ap-ctx b {
  font-weight: 600;
}
.ap-ctx span {
  color: var(--a-text-3);
}
.ap-ctx .av {
  color: #f1e6ff;
}
.ap-ctx .ic {
  width: 11px;
  height: 11px;
  color: var(--a-text-3);
}
.ap-ph {
  color: var(--a-text-3);
  padding: 8px 2px 6px;
}
.ap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--a-text-2);
  font-size: 12.5px;
}
.ap-row .who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ap-row .who::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a-ok);
}
.ap-row .go {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--a-raised);
}
/* Reduced motion: the demo still plays its steps, but nothing slides. */
@media (prefers-reduced-motion: reduce) {
  .demo-pane,
  .demo-pane[hidden],
  .drafted,
  .plan-row .num,
  .status,
  .approve-foot button,
  .ap-sugg button {
    transition: none;
  }
  .demo-pane[hidden],
  .drafted {
    transform: none;
  }
  .ap-think.live span,
  .ap-tool .spin {
    animation: none;
  }
  .film-play .disc {
    transition: none;
  }
  .film-play:hover .disc {
    transform: none;
  }
}
@media (max-width: 960px) {
  .demo-body {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .demo-tools .end,
  .demo-tools .opt {
    display: none;
  }
}
@media (max-width: 760px) {
  .demo-win {
    height: auto;
    grid-template-rows: 46px auto;
  }
  .demo-body {
    grid-template-columns: 1fr;
  }
  .demo-foot > .ic {
    display: none;
  }
  .demo-fields .demo-field:first-child {
    display: none;
  }
  .demo-mail {
    height: 390px;
    border-right: 0;
    border-top-right-radius: 0;
  }
  .demo-agent {
    height: 560px;
    border-top: 1px solid var(--a-border);
  }
  .demo-search {
    flex-basis: 60%;
  }
  .demo-read {
    padding: 18px 20px;
  }
  .demo-fields,
  .demo-editor {
    padding-inline: 20px;
  }
  .demo-attach {
    margin: 12px 0;
  }
}

/* film */
.film-frame {
  position: relative;
  border-radius: var(--r-panel);
  border: 1px solid var(--line-2);
  overflow: hidden;
  background: #0d0e10;
  aspect-ratio: 16 / 9;
  box-shadow: 0 50px 120px -40px rgba(0, 0, 0, 0.9);
}
.film-frame.tall {
  aspect-ratio: 4 / 5;
  max-width: 480px;
  margin-inline: auto;
}
.film-frame video,
.film-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(180deg, rgba(8, 9, 10, 0) 40%, rgba(8, 9, 10, 0.55));
  cursor: pointer;
}
.film-play .disc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 24px 0 20px;
  border-radius: var(--r-pill);
  background: rgba(247, 248, 248, 0.94);
  color: #0a0b0d;
  font-weight: 600;
  font-size: 15px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7);
  transition: transform 200ms var(--ease-out);
}
.film-play:hover .disc {
  transform: scale(1.04);
}
.film-play .disc .icon {
  width: 20px;
  height: 20px;
}
.film-frame.playing .film-play {
  display: none;
}

/* keyboard */
.keys {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.key-tile {
  display: grid;
  gap: 18px;
  align-content: space-between;
  min-height: 140px;
  padding: 20px;
  border-radius: var(--r-panel);
  border: 1px solid var(--line);
  background: var(--panel);
  transition: border-color 250ms, background-color 250ms, transform 250ms var(--ease-out);
}
.key-tile .caps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--text-3);
  font-size: 13px;
}
.key-tile kbd {
  height: 34px;
  min-width: 34px;
  padding: 0 10px;
  font-size: 13.5px;
  border-radius: var(--r-key);
  transition: transform 120ms var(--ease-out), box-shadow 120ms, border-color 200ms;
}
.key-tile span.l {
  font-size: 15.5px;
  font-weight: 540;
  color: var(--text);
}
.key-agent {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(189, 45, 196, 0.12), transparent 60%),
    radial-gradient(120% 100% at 0% 100%, rgba(22, 240, 163, 0.08), transparent 60%),
    var(--panel);
  border-color: rgba(189, 45, 196, 0.28);
}
.key-tile.hit {
  border-color: rgba(22, 240, 163, 0.45);
  background: radial-gradient(120% 120% at 0% 0%, rgba(22, 240, 163, 0.1), transparent 60%), var(--panel);
}
.key-tile.hit kbd {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  border-color: rgba(22, 240, 163, 0.5);
}
@media (max-width: 960px) {
  .keys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* accounts */
.setup-shot {
  max-width: 520px;
}
.notes {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 15px;
  color: var(--text-2);
}
.notes li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
}
.notes .icon {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--text-3);
}

/* privacy: heading beside a list of facts */
.privacy {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
}
.privacy-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.privacy-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 4px 18px;
  padding: 26px 0;
  border-top: 1px solid var(--line);
}
.privacy-list li:last-child {
  border-bottom: 1px solid var(--line);
}
.privacy-list .badge {
  grid-row: span 2;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
}
.privacy-list strong {
  font-weight: 580;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.privacy-list p {
  color: var(--text-2);
}
@media (max-width: 860px) {
  .privacy {
    grid-template-columns: 1fr;
  }
}

/* founder note */
.note {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
}
.note-body {
  display: grid;
  gap: 1.1em;
  font-size: clamp(19px, 1.9vw, 23px);
  line-height: 1.55;
  letter-spacing: -0.012em;
  color: #c9cdd4;
  max-width: 34em;
}
.note-body p:first-child {
  color: var(--text);
}
.note-body strong {
  color: var(--text);
  font-weight: 600;
}
.sig {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 0.6em;
  font-size: 16px;
  color: var(--text-2);
}
.sig b {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.sig a {
  color: var(--text-2);
  text-decoration-color: var(--line-3);
  text-underline-offset: 3px;
}
.sig .pigeon {
  width: 44px;
}
@media (max-width: 860px) {
  .note {
    grid-template-columns: 1fr;
  }
}

/* download */
.dl {
  position: relative;
  border-radius: 24px;
  border: 1px solid var(--line-2);
  padding: clamp(56px, 8vw, 96px) var(--gutter) clamp(48px, 6vw, 72px);
  background:
    radial-gradient(60% 80% at 20% 0%, rgba(22, 240, 163, 0.1), transparent 60%),
    radial-gradient(60% 80% at 85% 10%, rgba(189, 45, 196, 0.13), transparent 60%),
    linear-gradient(180deg, #121317, #0b0c0e);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 22px;
  overflow: visible;
}
.dl::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--neck);
  opacity: 0.35;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.dl .perch {
  position: absolute;
  top: 0;
  left: 50%;
  width: 104px;
  transform: translate(-50%, -78%);
}
.dl .body {
  max-width: 46ch;
}
.dl-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 310px));
  gap: 12px;
  margin-top: 10px;
}
.dl-option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 14px;
  padding: 16px 18px;
  border-radius: var(--r-panel);
  text-align: left;
  text-decoration: none;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.035);
  transition: transform 160ms var(--ease-out), background-color 200ms, border-color 200ms, box-shadow 300ms;
}
.dl-option .icon {
  grid-row: span 2;
  width: 26px;
  height: 26px;
}
.dl-option b {
  font-weight: 600;
  font-size: 15.5px;
}
.dl-option span {
  grid-column: 2;
  color: var(--text-2);
  font-size: 13.5px;
}
.dl-option .size {
  grid-column: 3;
  grid-row: 1 / span 2;
  color: var(--text-3);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.dl-option.primary {
  background: var(--text);
  color: #0a0b0d;
  border-color: transparent;
}
.dl-option.primary span,
.dl-option.primary .size {
  color: #4b4f57;
}
.dl-option:active {
  transform: scale(0.98);
}
@media (hover: hover) {
  .dl-option:hover {
    border-color: var(--line-3);
    background: rgba(255, 255, 255, 0.07);
  }
  .dl-option.primary:hover {
    background: #ffffff;
    box-shadow: 0 14px 50px -14px rgba(22, 240, 163, 0.5), 0 14px 60px -16px rgba(189, 45, 196, 0.5);
  }
}
.dl-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  font-size: 14px;
  color: var(--text-3);
}
.dl-gh {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-weight: 540;
  text-decoration: none;
}
.dl-gh:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.smartscreen {
  display: flex;
  gap: 10px;
  max-width: 56ch;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  text-align: left;
  font-size: 14px;
  color: var(--text-2);
}
.smartscreen .icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--eye);
}
@media (max-width: 640px) {
  .dl-options {
    grid-template-columns: 1fr;
    width: 100%;
  }
}

/* faq */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
}
.faq-list details {
  border-top: 1px solid var(--line);
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 560;
  letter-spacing: -0.012em;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary .icon {
  color: var(--text-3);
  transition: transform 300ms var(--ease-out);
}
.faq-list details[open] summary .icon {
  transform: rotate(45deg);
}
.faq-list .a {
  padding: 0 40px 24px 0;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.6;
}
.faq-list code {
  font-family: 'Cascadia Mono', Consolas, monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}
@media (max-width: 860px) {
  .faq {
    grid-template-columns: 1fr;
  }
}

/* footer */
.foot {
  padding: 56px 0 64px;
  border-top: 1px solid var(--line);
}
.foot .wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.foot .brand svg {
  height: 22px;
}
.foot p {
  color: var(--text-2);
  font-size: 14.5px;
}
.foot nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
  font-size: 14.5px;
}
.foot nav a {
  color: var(--text-2);
  text-decoration: none;
}
.foot nav a:hover {
  color: var(--text);
}