/* ==========================================================================
   Pixtore — page layout. Every rule here is a port of an inline style from
   the Claude Design mockup (design-export/template.html).
   ========================================================================== */

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

/* `clip` rather than `hidden`: it contains the oversized hero glow and the
   footer wordmark without turning <html> into a scroll container, which would
   stop the header from sticking. */
html {
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--lbl);
}

img {
  max-width: 100%;
}

h1,
h2,
h3 {
  margin: 0;
}

p {
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Animations carried over from the mockup
   -------------------------------------------------------------------------- */
@keyframes px-led {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@keyframes px-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* --------------------------------------------------------------------------
   Shared section scaffolding
   -------------------------------------------------------------------------- */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.section {
  padding: 112px 24px 0;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-head--split {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}

.section-head--center {
  align-items: center;
  text-align: center;
}

.h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.section-head--split .h2 {
  max-width: 560px;
}

.lede {
  font-size: 15px;
  color: var(--text-2);
}

.section-head--split .lede {
  max-width: 400px;
}

.measure-560 {
  max-width: 560px;
}

.measure-640 {
  max-width: 640px;
}

.measure-720 {
  max-width: 720px;
}

.faq__shell {
  max-width: 880px;
  gap: 32px;
}

/* --------------------------------------------------------------------------
   App Store banner — the strip above the header on iOS. Safari draws its own
   from <meta name="apple-itunes-app">, so main.js only reveals this one in the
   iOS browsers that ignore that tag. It scrolls away with the page, the way
   Safari's does; the header keeps the sticky slot to itself.
   -------------------------------------------------------------------------- */
.appbanner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #141626;
  border-bottom: 1px solid var(--s2);
}

/* .appbanner is display:flex, which would otherwise outvote [hidden]. */
.appbanner[hidden] {
  display: none;
}

.appbanner__close {
  flex: none;
  display: flex;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--text-nav);
  cursor: pointer;
}

.appbanner__close svg {
  width: 18px;
  height: 18px;
}

.appbanner__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.appbanner__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.appbanner__name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbanner__note {
  font-size: 12px;
  color: var(--text-nav);
}

/* Both classes again: Basecoat's `.btn:not([data-size])` is the heavier rule. */
.btn.appbanner__get {
  flex: none;
  padding: 9px 16px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 16px 24px 0;
}

.header__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: var(--shell);
  min-height: 68px;
  margin: 0 auto;
  padding: 8px 12px;
  border: 1px solid var(--s2);
  border-radius: 28px;
  background: var(--header-bg);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand__mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.brand__name {
  font-size: 16px;
  font-weight: 800;
}

.nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-nav);
  flex-wrap: wrap;
}

/* main.js marks the page you are on; the nav is otherwise identical everywhere. */
.nav a[aria-current='page'] {
  color: var(--text-1);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
}

/* EN/DE segmented control */
.lang {
  display: flex;
  padding: 3px;
  border-radius: 999px;
  background: var(--s2);
  font-size: 12px;
  font-weight: 700;
}

.lang__btn {
  border: 0;
  border-radius: 999px;
  padding: 7px 11px;
  font: inherit;
  font-weight: 700;
  background: transparent;
  color: var(--text-nav);
  cursor: pointer;
}

.lang__btn[aria-pressed='true'] {
  background: #fff;
  color: var(--ink);
}

/* Burger — not in the mockup; it replaces the nav wrapping onto a second row */
.burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--s2);
  border-radius: 999px;
  background: transparent;
  color: var(--text-nav);
  cursor: pointer;
}

.burger:hover {
  background: var(--s2);
  color: var(--text-1);
}

.burger svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* Copy on the left, the desk on the right. The desk is drawn far wider than
   its column and bleeds out of it, so the clipping lives here on the section:
   it passes behind the copy (which is lifted) and is cut at the section edge. */
.hero {
  position: relative;
  padding: 72px 24px 24px;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  left: 65%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glowc), 0.28), rgba(var(--glowc), 0));
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px;
  align-items: center;
  max-width: 1240px;
  margin: 0 auto;
}

.hero__copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

/* .btn-row centres itself for the sections that use it on their own axis; in
   the hero it runs under left-aligned copy. */
.hero__copy .btn-row {
  justify-content: flex-start;
}

.hero__title {
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.grad-text {
  background: linear-gradient(90deg, var(--a3), var(--a2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  max-width: 520px;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: pretty;
}

.btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* The App Store button wears Apple's mark ahead of its label; Basecoat's .btn
   has neither a gap nor an icon this large. Both classes, so this outweighs
   Basecoat's own `.btn[data-size]` and `.btn svg` rules. */
.btn.btn--appstore {
  gap: 10px;
  padding-left: 18px;
}

.btn.btn--appstore svg:not([class*='size-']) {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------------------------
   Hero scene — an isometric desk: phone, router, drive.

   Everything inside .scene__fit is drawn on a fixed 820x560 artboard tipped
   into an axonometric view (no perspective — parallel projection, so a plain
   rotate pair is enough). hero-scene.js scales the artboard to the box and
   drives the tiles. Positions and shades come straight from the mockup.
   -------------------------------------------------------------------------- */
.scene {
  /* Body shades of the hardware. Off-palette on purpose: the devices sit in
     their own plastic/metal ramp rather than the surface ramp. */
  --dev-lo: #23263c;   /* phone body, bottom half */
  --dev-hi: #2b2e45;   /* phone body, top half */
  --dev-edge: #3a3d58; /* phone bezel */
  --dev-type: #c7d0ff; /* lettering on a device */
  --dev-meta: #8f94bd; /* small labels, connectors */

  position: relative;
  width: 100%;
  height: clamp(380px, 44vw, 560px);
}

.scene__fit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 820px;
  height: 560px;
  margin: -280px 0 0 -410px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.scene__3d {
  position: absolute;
  inset: 0;
  transform: rotateX(58deg) rotateZ(-38deg);
  transform-style: preserve-3d;
}

/* Tiles in flight live here — outside the tipped artboard, so the script
   positions them in plain page pixels and tilts each one itself. */
.scene__layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* ---- Desk ---- */
.desk,
.desk__glow {
  position: absolute;
  left: -150px;
  top: -80px;
  width: 1120px;
  height: 760px;
  border-radius: 140px;
}

.desk {
  background: linear-gradient(135deg, #171a30, #101226);
  box-shadow: inset 0 0 0 1px var(--s2);
}

.desk__glow {
  background: radial-gradient(closest-side at 62% 50%, rgba(76, 81, 160, 0.35), transparent 70%);
}

.desk__grid {
  position: absolute;
  left: -110px;
  top: -40px;
  width: 1040px;
  height: 680px;
  border-radius: 100px;
  background:
    repeating-linear-gradient(0deg, rgba(165, 180, 252, 0.06) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(165, 180, 252, 0.06) 0 1px, transparent 1px 40px);
}

/* ---- Phone ---- */
.phone {
  position: absolute;
  left: 130px;
  top: 130px;
  width: 170px;
  height: 340px;
  transform-style: preserve-3d;
}

.phone__shadow {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  background: #000;
  opacity: 0.6;
  filter: blur(14px);
  transform: translate(10px, 14px);
}

.phone__slab {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.phone__slab span {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  background: var(--dev-lo);
}

.phone__slab span:nth-child(n + 6) {
  background: var(--dev-hi);
}

.phone__slab span:nth-child(2)  { transform: translateZ(1px); }
.phone__slab span:nth-child(3)  { transform: translateZ(2px); }
.phone__slab span:nth-child(4)  { transform: translateZ(3px); }
.phone__slab span:nth-child(5)  { transform: translateZ(4px); }
.phone__slab span:nth-child(6)  { transform: translateZ(5px); }
.phone__slab span:nth-child(7)  { transform: translateZ(6px); }
.phone__slab span:nth-child(8)  { transform: translateZ(7px); }
.phone__slab span:nth-child(9)  { transform: translateZ(8px); }
.phone__slab span:nth-child(10) { transform: translateZ(9px); }
.phone__slab span:nth-child(11) { transform: translateZ(10px); }

.phone__face {
  position: absolute;
  inset: 0;
  padding: 6px;
  border-radius: 34px;
  background: var(--dev-edge);
  transform: translateZ(10.5px);
}

.phone__glass {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 29px;
  background: var(--ink);
  overflow: hidden;
}

.phone__notch {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 44px;
  height: 12px;
  border-radius: 999px;
  background: #1a1d33;
}

.phone__screen {
  position: absolute;
  inset: 0;
  padding: 6px;
  overflow: hidden;
}

/* The tile grid and its children are built by hero-scene.js */
.feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  will-change: transform;
}

.feed__tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 5px;
}

.feed__lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s;
}

.feed__shackle {
  width: 34%;
  height: 24%;
  border: 2px solid #fff;
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  transform: translateY(-45%) rotate(-14deg);
  transform-origin: left bottom;
}

.feed__body {
  width: 46%;
  height: 30%;
  border-radius: 2px;
  background: #fff;
}

.feed__done {
  position: absolute;
  right: 8%;
  bottom: 8%;
  display: grid;
  place-items: center;
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.feed__check {
  width: 42%;
  height: 22%;
  border-left: 2px solid #16a34a;
  border-bottom: 2px solid #16a34a;
  transform: translateY(-25%) rotate(-45deg);
}

/* A tile mid-flight: same face as .feed__tile, minus the grid. */
.feed__ghost {
  position: absolute;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 22px rgba(var(--glowc), 0.6);
}

.feed__ghost .feed__lock {
  opacity: 1;
  transition: none;
}

.feed__ghost .feed__shackle {
  transform: none;
}

/* ---- USB cable, drive to router ---- */
.cable {
  position: absolute;
  left: 650px;
  top: 160px;
  width: 200px;
  height: 200px;
  overflow: visible;
  transform: translateZ(2px);
}

/* ---- Router ---- */
.router {
  position: absolute;
  left: 610px;
  top: 160px;
  width: 60px;
  height: 200px;
  transform-style: preserve-3d;
}

.router__shadow {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: #000;
  opacity: 0.65;
  filter: blur(18px);
  transform: translate(24px, 30px) scale(1.2);
}

.router__bottom {
  position: absolute;
  left: 0;
  top: 200px;
  width: 60px;
  height: 240px;
  border-radius: 0 0 12px 12px;
  background: #1c1f36;
  transform-origin: top center;
  transform: rotateX(90deg) rotateY(180deg);
}

/* The face carrying the LEDs: a 240x200 plate stood up on its left edge, with
   its contents turned a quarter turn so the lettering runs the right way. */
.router__front {
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
  height: 200px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(90deg, #2a2e4a, #343858);
  overflow: hidden;
  transform-origin: left;
  transform: rotateY(-90deg);
}

.router__panel {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  height: 240px;
  padding: 22px 20px;
  transform-origin: 0 0;
  transform: rotate(90deg) translate(0, -240px);
}

.router__leds {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.router__row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.router__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.router__led--power {
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
}

.router__led--wlan,
.router__led--fon {
  background: var(--a2);
  box-shadow: 0 0 8px var(--a2);
  animation: px-led 1.6s ease-in-out infinite;
}

.router__led--fon {
  animation-duration: 2.3s;
  animation-delay: -0.7s;
}

/* Pulsed by the script each time a tile lands. */
.router__led--info {
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  opacity: 0.35;
}

.router__label {
  font: 600 8px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--dev-meta);
}

.router__brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font: 800 15px var(--font-sans);
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--dev-type);
  white-space: nowrap;
}

.router__vent {
  height: 28px;
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, #22253f 0 3px, transparent 3px 8px);
  opacity: 0.8;
}

.router__top {
  position: absolute;
  inset: 0;
  padding: 10px;
  border-radius: 14px;
  background: #3a3f66;
  transform: translateZ(240px);
}

.router__top .router__vent {
  height: 100%;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #2c3050 0 3px, transparent 3px 8px);
  opacity: 1;
}

/* ---- Drive ---- */
.hdd {
  position: absolute;
  left: 730px;
  top: 300px;
  width: 90px;
  height: 130px;
  transform-style: preserve-3d;
}

.hdd__shadow {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: #000;
  opacity: 0.6;
  filter: blur(12px);
  transform: translate(10px, 14px);
}

.hdd__front {
  position: absolute;
  left: 0;
  top: 130px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 90px;
  height: 16px;
  padding: 0 10px;
  border-radius: 0 0 8px 8px;
  background: #2c3050;
  transform-origin: top center;
  transform: rotateX(90deg) rotateY(180deg);
}

/* Flashes on every arrival — the script drives it. */
.hdd__led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--a2);
  opacity: 0.3;
}

.hdd__side {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 130px;
  border-radius: 8px 0 0 8px;
  background: #23263f;
  transform-origin: left;
  transform: rotateY(-90deg);
}

.hdd__top {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 10px;
  background: linear-gradient(135deg, #454a78, #363b62);
  box-shadow: inset 0 0 0 1px var(--a1);
  transform: translateZ(16px);
}

/* Where the tiles are aimed — measured, never seen. */
.hdd__target {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
}

.hdd__name {
  font: 800 18px var(--font-sans);
  letter-spacing: 0.06em;
  color: var(--dev-type);
}

.hdd__size {
  font: 700 13px var(--font-sans);
  letter-spacing: 0.08em;
  color: var(--dev-meta);
}

/* --------------------------------------------------------------------------
   Stats strip
   -------------------------------------------------------------------------- */
.stats {
  border-top: 1px solid var(--s2);
  border-bottom: 1px solid var(--s2);
}

.stats__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  max-width: var(--shell);
  margin: 0 auto;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 36px 24px;
  border-right: 1px solid var(--s2);
}

.stat:last-child {
  border-right: 0;
}

.stat__value {
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.stat__label {
  font-size: 13px;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.grid-cards--tight {
  gap: 16px;
}

.grid-cards--narrow {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.step__num {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: var(--on);
  font-size: 16px;
  font-weight: 800;
}

.step__shot {
  border: 1px solid var(--s2);
  border-radius: 16px;
  background: var(--ink);
  overflow: hidden;
}

.step__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Backup bento
   -------------------------------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.bento__wide {
  min-height: 300px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: end;
}

.bento__wide h3 {
  font-size: 26px;
  line-height: 1.1;
}

.bento__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.queue {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.28);
  padding: 20px;
}

.queue__phone {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 44px;
  height: 78px;
  padding-top: 6px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  background: var(--ink);
}

.queue__speaker {
  width: 14px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.queue__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.queue__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.queue__wire {
  width: 18px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
}

.queue__target {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 10px 12px;
}

.queue__meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 600 11px var(--font-mono);
}

.card--tall {
  min-height: 300px;
  justify-content: flex-end;
  gap: 8px;
}

.card--flush {
  min-height: 260px;
  justify-content: flex-end;
  gap: 8px;
}

.card__emoji {
  margin-bottom: auto;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

@media (min-width: 720px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }

  .bento__wide {
    grid-column: span 2;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1040px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Phone storage
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}

.split__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.split__copy p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px;
  border: 1px solid var(--s3);
  border-radius: 32px;
  background: linear-gradient(180deg, var(--s0), var(--bg));
}

.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.mosaic__cell {
  aspect-ratio: 1;
  border: 1.5px dashed var(--s3);
  border-radius: 8px;
}

.mosaic__cell[data-state='local'] {
  border-color: transparent;
  background: var(--a1);
}

.mosaic__cell[data-state='local-alt'] {
  border-color: transparent;
  background: var(--a2);
}

.mosaic__cell[data-state='local-grad'] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--a1), var(--a3));
}

.legend {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
}

.legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--a1);
}

.legend__swatch--remote {
  background: transparent;
  border: 1.5px dashed var(--s3);
}

.rule {
  height: 1px;
  background: var(--s2);
}

.meters {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meter__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
}

.meter__value {
  color: var(--lbl);
}

.meter__value--muted {
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   Encryption
   -------------------------------------------------------------------------- */
.feature {
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--s2);
  border-radius: 32px;
  background: var(--s1);
}

.vault {
  position: relative;
  display: grid;
  place-items: center;
  height: 380px;
  border: 1px solid var(--s2);
  border-radius: 24px;
  background: var(--bg);
  overflow: hidden;
}

.vault__glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glowc), 0.45), transparent);
}

.vault__envelope {
  position: relative;
  width: 260px;
  height: 180px;
  animation: px-float 6s ease-in-out infinite;
}

.vault__base {
  position: absolute;
  inset: 0;
  border-radius: 22px;
  background: linear-gradient(160deg, var(--a1), var(--a2));
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.vault__flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 110px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, var(--a3), var(--a1));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.vault__flap-shade {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 110px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.vault__lock {
  position: absolute;
  left: 50%;
  top: 78px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px solid var(--s3);
  border-radius: 22px;
  background: var(--ink);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

/* Face ID style bracket frame */
.vault__frame {
  position: absolute;
  inset: 12px;
  border: 2px solid var(--a1);
  border-radius: 14px;
  clip-path: polygon(
    0 0, 28% 0, 28% 8%, 8% 8%, 8% 28%, 0 28%,
    0 72%, 8% 72%, 8% 92%, 28% 92%, 28% 100%,
    72% 100%, 72% 92%, 92% 92%, 92% 72%, 100% 72%,
    100% 28%, 92% 28%, 92% 8%, 72% 8%, 72% 0,
    100% 0, 100% 100%, 0 100%
  );
}

.vault__eyes {
  display: flex;
  gap: 10px;
  margin-top: -10px;
}

.vault__eyes span {
  width: 5px;
  height: 9px;
  border-radius: 3px;
  background: #fff;
}

.vault__smile {
  position: absolute;
  bottom: 22px;
  width: 22px;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-radius: 0 0 12px 12px;
}

.vault__key {
  position: absolute;
  right: -42px;
  bottom: -26px;
  display: flex;
  align-items: center;
  transform: rotate(-30deg);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
}

.vault__key-ring {
  width: 38px;
  height: 38px;
  border: 9px solid var(--on);
  border-radius: 50%;
}

.vault__key-shaft {
  width: 56px;
  height: 9px;
  margin-left: -2px;
  border-radius: 0 4px 4px 0;
  background: var(--on);
}

.vault__key-tooth {
  position: absolute;
  bottom: -8px;
  width: 8px;
  border-radius: 0 0 2px 2px;
  background: var(--on);
}

.vault__key-tooth--outer {
  right: 8px;
  height: 12px;
}

.vault__key-tooth--inner {
  right: 22px;
  height: 10px;
}

.vault__caption {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--text-3);
}

.feature__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.bullets {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
}

.bullets li {
  display: flex;
  gap: 14px;
  list-style: none;
}

.bullets li::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--a1);
}

.footnote {
  font-size: 13px;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   Storage options
   -------------------------------------------------------------------------- */
.card--compact {
  gap: 10px;
  border-radius: 24px;
  padding: 28px;
}

.card--compact h3 {
  font-size: 20px;
}

.card--compact p {
  font-size: 14px;
  line-height: 1.55;
}

.host {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--s2);
  border-radius: 14px;
  background: var(--bg);
}

.host__name {
  font: 600 15px var(--font-mono);
  color: #fff;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 80px);
  border-radius: 32px;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  color: var(--on);
  text-align: center;
}

.cta__title {
  max-width: 760px;
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.cta__lede {
  max-width: 520px;
  font-size: 16px;
}

.cta .btn-row {
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Sub-pages (Contact, Privacy Policy, Terms of Use)
   -------------------------------------------------------------------------- */
.page-main {
  flex: 1;
  padding: 96px 24px 112px;
}

.page-title {
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.inline-link {
  color: var(--lbl);
}

/* ---- Contact ---- */
.contact {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 760px;
  margin: 0 auto;
}

.contact__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact__head .page-title {
  text-wrap: balance;
}

.contact__head p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.contact__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--s2);
  border-radius: 20px;
  background: var(--s1);
  padding: 20px 24px;
}

.link-card:hover {
  border-color: var(--a1);
  color: var(--text-1);
}

.link-card__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.link-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.link-card__value {
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.link-card__arrow {
  flex: none;
  font-size: 20px;
  color: var(--lbl);
}

.form-note {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-3);
}

/* ---- Legal pages ---- */
.legal {
  display: flex;
  flex-direction: column;
  gap: 40px;
  max-width: 760px;
  margin: 0 auto;
}

.legal__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal__updated {
  font-size: 15px;
  color: var(--text-3);
}

.legal__intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}

.legal > section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.legal h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.legal p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
}

.legal strong {
  color: var(--text-1);
}

.legal__sub {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 800;
}

.legal__note {
  font-size: 13px;
  color: var(--text-3);
}

.info-card {
  border: 1px solid var(--s2);
  border-radius: 20px;
  background: var(--s1);
  padding: 22px 26px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-strong);
}

.info-card__label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.legal-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--a1), var(--a2));
  padding: 32px;
  color: var(--on);
}

.legal-cta h2 {
  font-size: 22px;
  font-weight: 800;
}

.legal-cta p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--on);
}

.legal-cta .btn {
  margin-top: 8px;
  align-self: flex-start;
}

/* Compact: the same panel riding along in the setup guide's sidebar. */
.legal-cta[data-size='sm'] {
  gap: 8px;
  border-radius: 18px;
  padding: 20px;
}

.legal-cta[data-size='sm'] h2 {
  font-size: 15px;
}

.legal-cta[data-size='sm'] p {
  font-size: 13px;
}

.legal-cta[data-size='sm'] .btn {
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Setup guide (Windows / macOS / FRITZ!Box)

   The one page that inverts: the steps sit on a light "paper" card with the
   help beside it in the dark, so what you have to *do* is separated from what
   you may read by layout rather than by a divider.

   All three platform panels are in the DOM; main.js hides the two that are
   not selected. With JavaScript off — and for a crawler — the page is whole.
   -------------------------------------------------------------------------- */
.guide {
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  margin: 0 auto;
}

.guide__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.guide__head .page-title {
  max-width: 720px;
  text-wrap: balance;
}

.guide__intro {
  max-width: 620px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-2);
  text-wrap: pretty;
}

/* The small uppercase labels that head the sidebar blocks and the background
   section — quieter than .badge, which is the accent-coloured eyebrow. */
.label-sm {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* ---- Platform selector ---- */
.platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  border: 1px solid var(--s2);
  border-radius: 999px;
  background: var(--s1);
  padding: 5px;
}

.platform-tab {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-nav);
  cursor: pointer;
}

.platform-tab:hover {
  color: var(--text-1);
}

.platform-tab[aria-selected='true'] {
  background: #fff;
  color: var(--ink);
}

/* ---- Two columns: the steps, and everything that is not a step ---- */
.guide__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  align-items: start;
  gap: 48px;
  margin-top: 48px;
}

/* ---- The paper card ---- */
.steps-card {
  border-radius: 28px;
  background: var(--paper);
  padding: clamp(24px, 4vw, 40px) clamp(20px, 4.5vw, 44px) 32px;
  color: var(--paper-text);
}

.guide__panel {
  display: flex;
  flex-direction: column;
}

.guide__panel[hidden] {
  display: none;
}

.steps-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 22px;
}

.steps-card__head h2 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.steps-card__count {
  flex: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--paper-text-4);
  white-space: nowrap;
}

.steps-card__lead {
  margin: 18px 0 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-text-3);
}

.steps {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  list-style: none;
  border-bottom: 1px solid var(--paper-line-soft);
  padding: 20px 0;
  counter-increment: step;
}

.step-row::before {
  content: counter(step, decimal-leading-zero);
  padding-top: 3px;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--a1);
}

.step-row__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.step-row__body h3 {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
}

.step-row__body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--paper-text-2);
}

.step-row__body strong {
  font-weight: 600;
  color: var(--paper-text);
}

/* A click path, printed the way the buttons are actually labelled. */
.ui-path {
  align-self: flex-start;
  margin-top: 6px;
  border-radius: 8px;
  background: var(--paper-chip);
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--a1);
  overflow-wrap: anywhere;
}

.callout {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 24px;
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  background: var(--paper-card);
  padding: 16px 20px;
}

.callout__title {
  font-size: 14px;
  font-weight: 700;
}

.callout p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--paper-text-2);
}

.steps-card__note {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--paper-text-4);
}

/* ---- Sidebar: troubleshooting, caveats, and a way to ask a human ---- */
.guide__aside {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
}

.aside-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The accordion rows carry their own spacing; this one only needs the label
   clear of them. */
.aside-block--flush {
  gap: 8px;
}

.aside-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-3);
}

.aside-note strong {
  font-weight: 600;
  color: var(--text-nav);
}

/* ---- Background: the long-form context, last and quietest ---- */
.guide__bg {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 96px;
  border-top: 1px solid var(--s2);
  padding-top: 64px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-3);
}

.guide__bg h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-2);
}

.guide__bg > p {
  max-width: 720px;
}

.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px 40px;
  margin-top: 8px;
}

.bg-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bg-item h3 {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-nav);
}

.bg-item p {
  font-size: 13.5px;
}

/* Below this the sidebar has no room left, so it becomes a footer to the
   steps instead of a column beside them. */
@media (max-width: 920px) {
  .guide__layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .guide__aside {
    position: static;
    padding-top: 0;
  }

  .guide__bg {
    margin-top: 72px;
    padding-top: 48px;
  }
}

@media (max-width: 620px) {
  .platforms {
    flex-direction: column;
    border-radius: 20px;
  }

  .platform-tab {
    border-radius: 14px;
  }

  .steps-card {
    border-radius: 22px;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding: 40px 24px 0;
}

/* Sub-pages already carry the gap in <main>'s bottom padding. */
.footer--flush {
  padding-top: 0;
}

.footer__inner {
  position: relative;
  max-width: var(--shell);
  min-height: 360px;
  margin: 0 auto;
  padding: 40px 48px 200px;
  border: 1px solid var(--s2);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  background: var(--s1);
  overflow: hidden;
}

.footer__top {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

.footer__brand {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.footer__brand img {
  width: 72px;
  height: 72px;
  border-radius: 18px;
}

.footer__brand span {
  font-size: 13px;
  font-weight: 700;
}

.footer__nav {
  margin-left: 0;
  gap: 28px;
}

.footer__cta {
  margin-left: auto;
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 28px;
  font-size: 12px;
  color: var(--text-3);
}

.footer__links {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* The three sub-pages are not built yet; the links stay visible but inert. */
.footer__links a[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.55;
}

.footer__links a[aria-disabled='true']:hover {
  color: inherit;
}

.footer__wordmark {
  position: absolute;
  left: 44px;
  bottom: -70px;
  font-size: clamp(120px, 22vw, 250px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.footer__wordmark span:first-child {
  background: linear-gradient(90deg, var(--a1), var(--a2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.footer__wordmark span:last-child {
  color: var(--s3);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1120px) {
  .nav {
    display: none;
  }

  .burger {
    display: inline-flex;
  }

  .header__actions {
    margin-left: auto;
  }

  .section,
  .hero {
    padding-top: 80px;
  }
}

@media (max-width: 620px) {
  .header__bar {
    row-gap: 10px;
  }

  .header__cta {
    display: none;
  }

  .section,
  .hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .header,
  .footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card {
    padding: 24px;
  }

  .footer__inner {
    padding: 32px 24px 160px;
  }

  .footer__wordmark {
    left: 24px;
    bottom: -40px;
  }

  .footer__cta {
    margin-left: 0;
  }

  .scene {
    height: 300px;
  }

  .split {
    gap: 32px;
  }

  .stat {
    border-right: 0;
    border-bottom: 1px solid var(--s2);
  }

  .stat:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}