@font-face {
  font-family: "Unbounded";
  src: url("/assets/Unbounded-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  --cobalt: #1a36a8;
  --violet: #5224b4;
  --accent: #8fa6ff;
  --accent-text: #c4d0ff;
  --navy: #0d1440;
  --ink: #ffffff;
  --ink-2: #e1e7ff;
  --glass: rgba(7, 10, 50, 0.32);
  --glass-edge: rgba(255, 255, 255, 0.28);
  --gutter: 16px;
  color-scheme: dark;
}
@media (min-width: 600px) { :root { --gutter: clamp(24px, 5vw, 48px); } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 1.0625rem/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif;
  background-color: #3a2aa6;
  background-image:
    radial-gradient(60rem 40rem at 85% -10%, rgba(143, 166, 255, 0.2), transparent 60%),
    linear-gradient(135deg, var(--cobalt), var(--violet));
  background-attachment: fixed;
  overflow-wrap: break-word;
}

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 6px var(--navy);
}

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 10;
  background: #fff;
  color: var(--navy);
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 16px; }

.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 16px var(--gutter);
  max-width: 1160px;
  margin: 0 auto;
}
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.lockup img { border-radius: 9px; }
.lockup span { font-family: "Unbounded", system-ui, sans-serif; font-weight: 600; font-size: 1.375rem; }
.top-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.top-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
  padding: 10px 8px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.top-nav a:hover { color: var(--ink); text-decoration: underline; }
.top-nav a.lang {
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--ink);
  background: var(--glass);
}
.top-nav a[aria-current] { font-weight: 700; }

main { max-width: 1160px; margin: 0 auto; padding: 0 var(--gutter) 56px; }

h1, h2, h3 { font-family: "Unbounded", system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }

.hero {
  display: grid;
  gap: 32px 48px;
  align-items: center;
  padding: 40px 0 40px;
}
@media (min-width: 900px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); padding: 64px 0 56px; } }
.tagline { color: var(--accent-text); font-weight: 600; margin: 0 0 12px; }
h1 { font-size: clamp(2rem, 7vw, 3.75rem); line-height: 1.08; margin: 0 0 20px; }
.lede { font-size: 1.25rem; color: var(--ink-2); max-width: 60ch; margin: 0 0 28px; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(20px);
}
.button:hover { background: rgba(7, 10, 50, 0.5); }
.status {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  background: var(--accent);
  color: var(--navy);
}

section { margin: 0 0 16px; scroll-margin-top: 16px; }
.section-title { font-size: clamp(1.5rem, 4.5vw, 2.25rem); line-height: 1.15; margin: 56px 0 12px; }
.section-lede { color: var(--ink-2); max-width: 66ch; margin: 0 0 24px; font-size: 1.125rem; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.card, .band {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  padding: 24px;
  backdrop-filter: blur(24px);
}
.card h3 { font-size: 1.125rem; line-height: 1.25; margin: 0 0 8px; }
.card p, .band p, .band li { color: var(--ink-2); margin: 0; }
.band { padding: 28px; }
.band > * + * { margin-top: 14px; }
.band h3 { font-size: 1.125rem; margin: 20px 0 6px; }
.band ul { padding-left: 1.25rem; margin: 12px 0 0; }
.band li + li { margin-top: 6px; }
.band a, .card a { color: var(--ink); }
.note { border-left: 4px solid var(--accent); padding-left: 16px; }

.faq h3 { font-size: 1.0625rem; line-height: 1.3; margin: 0 0 6px; }
.faq .card { padding: 20px 24px; }
.faq-grid { display: grid; gap: 12px; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: rgba(7, 10, 50, 0.55);
  padding: 0.1em 0.4em;
  border-radius: 6px;
  overflow-wrap: anywhere;
}

footer { padding: 32px var(--gutter) 48px; color: var(--ink-2); font-size: 0.9375rem; text-align: center; max-width: 1160px; margin: 0 auto; }
footer p { margin: 0 0 8px; }

/* Pairing animation: layered SVGs in a CSS 3D stage; transforms, opacity and filter only. */
.pair { margin: 0; position: relative; }
.pg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.pg-stage { position: relative; width: 100%; aspect-ratio: 1000 / 625; contain: layout; }
.pg-scene { position: absolute; inset: 0; }
.pg-haze { position: absolute; inset: -6% -4%; background:
  radial-gradient(46% 52% at 30% 42%, rgba(143, 166, 255, 0.34), transparent 70%),
  radial-gradient(40% 46% at 76% 62%, rgba(181, 140, 255, 0.30), transparent 70%); }
.pg-mac { position: absolute; left: 0; top: 3%; width: 62%; perspective: 1700px; }
.pg-ipad { position: absolute; left: 54%; top: 34%; width: 44%; perspective: 1700px; }
.pg-tilt, .pg-tilt2 { position: relative; transform-style: preserve-3d; }
.pg-tilt { transform: rotateY(9deg) rotateX(2deg); transform-origin: 50% 60%; }
.pg-tilt2 { transform: rotateY(-11deg) rotateX(3deg) rotateZ(-1.5deg); transform-origin: 50% 50%; }
.pg-body { display: block; width: 100%; height: auto; overflow: visible; }
.pg-layer { position: absolute; display: block; }
.pg-mac .pg-layer { left: 5.556%; top: 3.2%; width: 88.889%; height: 80%; }
.pg-mac .pg-desk-mac { clip-path: inset(0 round 1.7% / 2.75%); }
.pg-screen { position: absolute; left: 3.214%; top: 4.39%; width: 93.57%; height: 91.22%; clip-path: inset(0 round 5.3% / 7.5%); }
.pg-screen .pg-layer { left: 0; top: 0; width: 100%; height: 100%; }
.pg-notch, .pg-glint, .pg-glint2 { pointer-events: none; }
.pg-beam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* The final frame is the base state: paired, connected, linked. */
.pg-qr { opacity: 0; }
.pg-camera { opacity: 0; }
.pg-brackets, .pg-sweep, .pg-ripple, .pg-spark, .pg-burst, .pg-mark-off { opacity: 0; }
.pg-beam-core { opacity: 0.55; stroke-dasharray: 100 100; }
.pg-beam-glow { opacity: 0.22; }
.pg-tick-path { stroke-dasharray: 100 100; }
.pg-tick-ring { opacity: 0.5; }
.pg-ptr { transform: translate(146px, 126px); }
.pg-card { transform-origin: 81.25% 3.1%; }
.pg-spark { offset-path: path("M600 226 C 642 120, 596 48, 484 46"); offset-rotate: 0deg; }
.pg-ptr, .pg-brackets, .pg-sweep, .pg-qr, .pg-tick, .pg-ripple, .pg-burst, .pg-mark-on, .pg-mark-off, .pg-tick-ring, .pg-pill g { transform-box: fill-box; transform-origin: center; }
.pg-ptr { transform-box: view-box; transform-origin: 0 0; }
.pg-qr, .pg-tick { transform-box: view-box; }
.pg-qr { transform-origin: 320px 189px; }
.pg-tick { transform-origin: 320px 190px; }

.pair-toggle {
  position: absolute;
  right: 2%;
  bottom: 2%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink);
  background: rgba(7, 10, 50, 0.5);
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  backdrop-filter: blur(14px);
  cursor: pointer;
}
.pair-toggle:hover { background: rgba(7, 10, 50, 0.72); }
.pair-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.pair-toggle .ic-play { display: none; }
.pair-toggle[data-state="paused"] .ic-play { display: block; }
.pair-toggle[data-state="paused"] .ic-pause { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .pair.is-live .pg-stage { animation: pg-stage 9s linear infinite; }
  .pair.is-live .pg-scene *, .pair.is-live .pg-scene { animation-duration: 9s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: linear; }
  .pair.is-live .pg-float-a { animation-name: pg-float; animation-timing-function: ease-in-out; }
  .pair.is-live .pg-float-b { animation-name: pg-float; animation-timing-function: ease-in-out; animation-delay: -2.2s; }
  .pair.is-live .pg-tilt { animation-name: pg-tilt-a; animation-timing-function: ease-in-out; }
  .pair.is-live .pg-tilt2 { animation-name: pg-tilt-b; animation-timing-function: ease-in-out; }
  .pair.is-live .pg-haze { animation-name: pg-haze; animation-timing-function: ease-in-out; }
  .pair.is-live .pg-card { animation-name: pg-card; }
  .pair.is-live .pg-card-halo { animation-name: pg-halo; }
  .pair.is-live .pg-qr { animation-name: pg-qr; }
  .pair.is-live .pg-tick { animation-name: pg-tick; }
  .pair.is-live .pg-tick-path { animation-name: pg-tick-path; }
  .pair.is-live .pg-tick-ring { animation-name: pg-tick-ring; }
  .pair.is-live .pg-mark-off { animation-name: pg-mark-off; }
  .pair.is-live .pg-mark-on { animation-name: pg-mark-on; }
  .pair.is-live .pg-glide { animation-name: pg-glide; }
  .pair.is-live .pg-camera { animation-name: pg-camera; }
  .pair.is-live .pg-desk-ipad { animation-name: pg-desk; }
  .pair.is-live .pg-brackets { animation-name: pg-brackets; }
  .pair.is-live .pg-sweep { animation-name: pg-sweep; }
  .pair.is-live .pg-beam-core { animation-name: pg-beam-core; }
  .pair.is-live .pg-beam-glow { animation-name: pg-beam-glow; }
  .pair.is-live .pg-spark-1 { animation-name: pg-spark-1; }
  .pair.is-live .pg-spark-2 { animation-name: pg-spark-2; }
  .pair.is-live .pg-spark-3 { animation-name: pg-spark-3; }
  .pair.is-live .pg-burst { animation-name: pg-burst; }
  .pair.is-live .pg-ptr { animation-name: pg-ptr; }
  .pair.is-live .pg-ripple { animation-name: pg-ripple; }
  .pair.is-live .pg-pill g { animation-name: pg-pill; }
  .pair.is-live.is-paused .pg-scene *, .pair.is-live.is-paused .pg-scene, .pair.is-live.is-paused .pg-stage,
  .pair.is-live.is-offscreen .pg-scene *, .pair.is-live.is-offscreen .pg-scene, .pair.is-live.is-offscreen .pg-stage { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .pair-toggle { display: none; } }

@keyframes pg-stage { 0% { opacity: 0; } 5% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pg-float { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -7px, 0); } }
@keyframes pg-tilt-a { 0%, 100% { transform: rotateY(9deg) rotateX(2deg); } 50% { transform: rotateY(6deg) rotateX(3.2deg); } }
@keyframes pg-tilt-b { 0%, 100% { transform: rotateY(-11deg) rotateX(3deg) rotateZ(-1.5deg); } 50% { transform: rotateY(-8deg) rotateX(4deg) rotateZ(-1.5deg); } }
@keyframes pg-haze { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

@keyframes pg-mark-off {
  0% { opacity: 0; transform: scale(0.8); }
  5%, 9% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  13% { opacity: 1; transform: scale(1.5); }
  18%, 58% { opacity: 1; transform: scale(1); }
  64%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes pg-mark-on {
  0%, 59% { opacity: 0; transform: scale(0.5); animation-timing-function: cubic-bezier(0.2, 1.2, 0.3, 1); }
  66% { opacity: 1; transform: scale(1.35); animation-timing-function: ease-out; }
  72%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes pg-card {
  0%, 12% { opacity: 0; transform: scale(0.05); filter: blur(16px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  17% { opacity: 1; }
  27%, 100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes pg-halo { 0%, 56% { opacity: 0; } 64% { opacity: 1; } 80%, 100% { opacity: 0.35; } }
@keyframes pg-qr {
  0%, 58% { opacity: 1; transform: scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  64%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes pg-tick {
  0%, 62% { opacity: 0; transform: scale(0.4); animation-timing-function: cubic-bezier(0.2, 1.3, 0.4, 1); }
  67% { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pg-tick-path { 0%, 63% { stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); } 71%, 100% { stroke-dashoffset: 0; } }
@keyframes pg-tick-ring { 0%, 64% { opacity: 0; transform: scale(1); } 66% { opacity: 0.9; } 78%, 100% { opacity: 0; transform: scale(1.5); } }

@keyframes pg-glide {
  0%, 17% { opacity: 0; transform: translate3d(16%, 8%, 0) scale(0.9) rotateZ(5deg); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  26% { opacity: 1; }
  40%, 100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotateZ(0); }
}
@keyframes pg-camera {
  0%, 65% { opacity: 1; transform: scale(1); filter: blur(0); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  76%, 100% { opacity: 0; transform: scale(0.88); filter: blur(8px); }
}
@keyframes pg-desk {
  0%, 62% { opacity: 0; transform: scale(1.4); filter: blur(10px); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  72% { opacity: 1; }
  80%, 100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes pg-brackets {
  0%, 31% { opacity: 0; transform: scale(1.6); animation-timing-function: cubic-bezier(0.2, 1.1, 0.3, 1); }
  39% { opacity: 1; transform: scale(1); }
  62% { opacity: 1; transform: scale(1); }
  67%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes pg-sweep {
  0%, 40% { opacity: 0; transform: translateY(0); animation-timing-function: ease-in-out; }
  42% { opacity: 1; }
  52% { opacity: 1; transform: translateY(190px); }
  54%, 100% { opacity: 0; transform: translateY(190px); }
}

@keyframes pg-beam-core {
  0%, 53% { opacity: 0; stroke-dashoffset: 100; animation-timing-function: cubic-bezier(0.4, 0, 0.1, 1); }
  57% { opacity: 1; }
  62% { opacity: 1; stroke-dashoffset: 0; }
  74%, 100% { opacity: 0.55; stroke-dashoffset: 0; }
}
@keyframes pg-beam-glow { 0%, 53% { opacity: 0; } 62% { opacity: 0.85; } 78%, 100% { opacity: 0.22; } }
@keyframes pg-spark-1 { 0%, 54% { opacity: 0; offset-distance: 0%; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 55% { opacity: 1; } 62% { opacity: 1; offset-distance: 100%; } 63%, 100% { opacity: 0; offset-distance: 100%; } }
@keyframes pg-spark-2 { 0%, 55.5% { opacity: 0; offset-distance: 0%; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 56.5% { opacity: 1; } 63.5% { opacity: 1; offset-distance: 100%; } 64.5%, 100% { opacity: 0; offset-distance: 100%; } }
@keyframes pg-spark-3 { 0%, 57% { opacity: 0; offset-distance: 0%; animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1); } 58% { opacity: 1; } 65% { opacity: 1; offset-distance: 100%; } 66%, 100% { opacity: 0; offset-distance: 100%; } }
@keyframes pg-burst { 0%, 61% { opacity: 0; transform: scale(0.5); } 63% { opacity: 0.9; } 72%, 100% { opacity: 0; transform: scale(3.2); } }

@keyframes pg-ptr {
  0%, 77% { opacity: 0; transform: translate(430px, 280px); animation-timing-function: cubic-bezier(0.4, 0, 0.1, 1); }
  79% { opacity: 1; }
  88% { opacity: 1; transform: translate(146px, 126px) scale(1); }
  89.5% { transform: translate(146px, 126px) scale(0.84); }
  91%, 100% { opacity: 1; transform: translate(146px, 126px) scale(1); }
}
@keyframes pg-ripple { 0%, 89% { opacity: 0; transform: scale(0.3); } 90% { opacity: 0.9; } 95%, 100% { opacity: 0; transform: scale(2); } }
@keyframes pg-pill { 0%, 90% { opacity: 0; transform: translateY(-14px) scale(0.9); animation-timing-function: cubic-bezier(0.2, 1.2, 0.3, 1); } 94%, 100% { opacity: 1; transform: none; } }

/* Sub pages */
.doc { max-width: 760px; padding-top: 24px; }
.doc-title { font-size: clamp(2rem, 7vw, 3rem); line-height: 1.1; margin: 24px 0 24px; }
.doc .band h2 { font-size: 1.375rem; margin: 28px 0 8px; }
.doc .band h2:first-child { margin-top: 0; }

/* Footer */
.foot { max-width: 1160px; margin: 24px auto 0; padding: 0 var(--gutter) 40px; text-align: left; font-size: 1rem; color: var(--ink-2); }
.foot-inner {
  display: grid;
  gap: 32px 48px;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  padding: 28px;
  backdrop-filter: blur(24px);
}
@media (min-width: 760px) { .foot-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); padding: 36px; } }
.foot-brand p { margin: 8px 0 0; }
.foot-tag { color: var(--accent-text); font-weight: 600; }
.foot-lang a { color: var(--ink); }
.foot-nav { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 520px) { .foot-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot-title { font-family: "Unbounded", system-ui, sans-serif; font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 8px; color: var(--ink); }
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); text-decoration: none; }
.foot-nav a:hover { color: var(--ink); text-decoration: underline; }
.foot-copy { margin: 20px 4px 0; font-size: 0.9375rem; }

/* Language switch: quiet text control, same weight as the nav links */

.top-nav { flex: 1; justify-content: flex-end; }
.langsw { display: inline-flex; align-items: center; gap: 2px; margin-left: 12px; color: var(--ink-2); font-size: 0.9375rem; }
.langsw svg { width: 16px; height: 16px; margin-right: 4px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.langsw a { color: var(--ink-2); text-decoration: none; padding: 10px 6px; min-height: 44px; display: inline-flex; align-items: center; }
.langsw a:hover { color: var(--ink); text-decoration: underline; }
.langsw a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.langsw .sep { opacity: 0.6; }
@media (max-width: 719px) { .top { flex-wrap: wrap; } .top-nav { flex: 1 1 100%; justify-content: flex-start; } .top-nav .langsw { margin-left: auto; } }
.top-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 2px; }

pre { margin: 0; padding: 18px 20px; background: rgba(4, 6, 31, 0.62); border: 1px solid var(--glass-edge); border-radius: 16px; overflow-x: auto; font: 0.9375rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #fff; }
pre code { background: none; padding: 0; overflow-wrap: normal; }
pre .c { color: #c4d0ff; }
.page-lede { font-size: 1.25rem; color: var(--ink-2); max-width: 60ch; margin: 0 0 8px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.cta h2 { margin: 0; font-size: 1.5rem; }
.cta p { margin: 6px 0 0; }
.more { margin-top: 18px; }
.more a { font-weight: 600; }
.wide { max-width: 1160px; }
.pad-top { padding-top: 24px; }
.foot-inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .foot-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); } }
.foot-inner > *, .foot-nav > * { min-width: 0; }
.foot-title { overflow-wrap: anywhere; }
.band > :not(:first-child) { margin-top: 14px; }
.band > pre { margin-top: 16px; }
.doc { max-width: 1160px; }
.doc > h1, .doc > .page-lede, .doc .band, .doc .section-lede { max-width: 760px; }
.faq-grid { max-width: 860px; }