/*
  Wing Display — site tokens + base layer.

  Built on the LIGHT column of docs/design/tokens.md, alongside the SwiftUI theme
  (macos/WingDisplay/DesignSystem/DesignTokens.swift) and the Compose MaterialTheme
  (android/.../ui/theme/Theme.kt). Values come from that doc; don't invent new ones.

  WHY LIGHT, when the Electric Signal rule says always-dark: that rule governs app-owned
  CLIENT SCREENS, because the product is a display device and dark keeps the streamed
  picture uncluttered. A marketing site is not a client screen, and tokens.md already
  carries a light column the apps use under a light system appearance. Owner decision,
  2026-07-31.

  A handful of tokens below exist only here — accent-strong, surface-raised, the hero type
  step, space-4xl, radius-xl, glow-cyan, and two shadows — because a landing page needs a
  large headline, a raised card, and depth that the apps have no use for.

  No @font-face, no @import, no url() to any external host: the site promises zero
  third-party requests, and the privacy page states that as fact.
*/

:root {
  /* Color — light column */
  --color-accent: #0E8E92;
  --color-accent-strong: #0A6F72;
  --color-on-accent: #FFFFFF;
  --color-background: #FFFFFF;
  --color-surface: #F4F7F8;
  --color-surface-raised: #FFFFFF;
  --color-on-background: #0E1416;
  --color-text-secondary: #566569;
  --color-outline: #D3DBDD;
  --color-success: #0E9F6E;
  --color-warning: #B26A00;
  --color-error: #C73B3B;
  /* Electric Signal brand layer — used here as light accents, not surfaces */
  --color-aurora-indigo: #4C5EFF;
  --color-feather-tip: #B8FFF9;
  --color-glow-cyan: #2BD4DB;

  /* Typography — system stack only; the apps use SF and Roboto for the same reason */
  --font-family: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;

  --type-hero-size: 60px;
  --type-hero-line: 64px;
  --type-hero-weight: 700;

  --type-display-size: 34px;
  --type-display-line: 40px;
  --type-display-weight: 700;

  --type-title-size: 22px;
  --type-title-line: 28px;
  --type-title-weight: 600;

  --type-headline-size: 18px;
  --type-headline-line: 24px;
  --type-headline-weight: 600;

  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 400;

  --type-label-size: 13px;
  --type-label-line: 16px;
  --type-label-weight: 500;

  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-caption-weight: 400;

  /* Spacing — 4-pt base */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 80px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* Motion — calm, precise, quick; never flashy */
  --motion-quick: 120ms;
  --motion-standard: 220ms;
  --motion-standard-easing: cubic-bezier(0.2, 0, 0, 1);
  --motion-emphasized: 380ms;
  --motion-emphasized-easing: cubic-bezier(0.3, 0, 0, 1);

  /* Depth — website only; the apps use native elevation */
  --shadow-soft: 0 1px 2px rgba(14, 20, 22, 0.04), 0 4px 12px rgba(14, 20, 22, 0.06),
    0 16px 32px rgba(14, 20, 22, 0.05);
  --shadow-lifted: 0 2px 4px rgba(14, 20, 22, 0.08), 0 12px 24px rgba(14, 20, 22, 0.10),
    0 32px 64px rgba(14, 20, 22, 0.12);
}

/* Border-box everywhere so layout maths stays predictable once borders appear. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
figure,
ul {
  margin: 0;
}

body {
  /* Decorative glows and rotated device frames must never be able to widen the page.
     clip (not hidden) so it can't accidentally create a scroll container. */
  overflow-x: clip;
  background-color: var(--color-background);
  color: var(--color-on-background);
  font-family: var(--font-family);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--type-display-size);
  line-height: var(--type-display-line);
  font-weight: var(--type-display-weight);
}

h2 {
  font-size: var(--type-title-size);
  line-height: var(--type-title-line);
  font-weight: var(--type-title-weight);
}

h3 {
  font-size: var(--type-headline-size);
  line-height: var(--type-headline-line);
  font-weight: var(--type-headline-weight);
}

a {
  color: var(--color-accent);
  text-underline-offset: 0.1em;
}

/* Keyboard focus only — a mouse click shouldn't ring. 2px is a literal because the token
   doc defines no border-width scale; a spacing token here would be an 8px ring. */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: var(--space-xs);
  border-radius: var(--radius-sm);
}

/* Off-screen but reachable by keyboard and assistive tech; the skip link uses this and
   becomes a visible panel once focused. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.visually-hidden:focus {
  position: fixed;
  top: var(--space-md);
  left: var(--space-md);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  overflow: visible;
  clip-path: none;
  white-space: normal;
  background-color: var(--color-surface-raised);
  color: var(--color-on-background);
  box-shadow: var(--shadow-lifted);
  border-radius: var(--radius-md);
  z-index: 100;
}


/* ============================================================
   Landing page. Consumes the tokens above; no raw colour values.
   ============================================================ */

/* ---- Header: sticky, translucent, so the aurora shows through ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-2xl);
  background: color-mix(in srgb, var(--color-background) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-outline) 60%, transparent);
}

.site-mark {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--type-headline-size);
  font-weight: var(--type-headline-weight);
  letter-spacing: -0.01em;
  color: var(--color-on-background);
  text-decoration: none;
}

.nav { display: flex; align-items: center; gap: var(--space-xl); }

.nav a:not(.btn) {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: var(--type-body-size);
  transition: color var(--motion-standard) var(--motion-standard-easing);
}

.nav a:not(.btn):hover { color: var(--color-on-background); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--type-body-size);
  font-weight: var(--type-label-weight);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform var(--motion-standard) var(--motion-standard-easing),
    box-shadow var(--motion-standard) var(--motion-standard-easing),
    background var(--motion-standard) var(--motion-standard-easing),
    border-color var(--motion-standard) var(--motion-standard-easing);
}

/* Gradient rather than flat fill — the single most-clicked element earns the brand's full range. */
.btn-primary {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-strong));
  color: var(--color-on-accent);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-accent) 34%, transparent);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--color-accent) 44%, transparent);
}

.btn-secondary {
  background: color-mix(in srgb, var(--color-background) 70%, transparent);
  color: var(--color-on-background);
  border-color: var(--color-outline);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-soft);
}

.btn:active { transform: translateY(0); }

/* ---- Hero ---- */
.hero {
  position: relative;
  text-align: center;
  padding: var(--space-4xl) var(--space-xl) var(--space-3xl);
  overflow: hidden;
  isolation: isolate;
}

/* Three drifting colour fields. An image would cost bandwidth and still not move;
   this is a few hundred bytes of CSS and it makes the page feel alive. */
.aurora {
  position: absolute;
  inset: -20% -10% auto;
  height: 780px;
  z-index: -2;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.55;
}

.aurora span {
  position: absolute;
  display: block;
  border-radius: var(--radius-pill);
  will-change: transform;
}

.aurora .a1 {
  width: 46%; height: 58%; left: 4%; top: 6%;
  background: var(--color-glow-cyan);
  animation: drift-a 26s ease-in-out infinite alternate;
}

.aurora .a2 {
  width: 40%; height: 52%; right: 6%; top: 0;
  background: var(--color-aurora-indigo);
  opacity: 0.72;
  animation: drift-b 32s ease-in-out infinite alternate;
}

.aurora .a3 {
  width: 34%; height: 44%; left: 34%; top: 30%;
  background: var(--color-accent);
  opacity: 0.5;
  animation: drift-c 38s ease-in-out infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(12%, 8%, 0) scale(1.15); } }
@keyframes drift-b { to { transform: translate3d(-14%, 12%, 0) scale(1.1); } }
@keyframes drift-c { to { transform: translate3d(8%, -10%, 0) scale(1.2); } }

/* A faint dot field gives the white space texture without reading as a pattern. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(
    color-mix(in srgb, var(--color-on-background) 8%, transparent) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
  padding: var(--space-sm) var(--space-lg);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-background) 80%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--color-accent-strong);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
}

.hero-eyebrow::before {
  content: "";
  width: var(--space-sm);
  height: var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* clamp() so the headline is huge on a desktop and still fits a phone without a breakpoint. */
.hero-title {
  max-width: 16ch;
  margin: 0 auto var(--space-xl);
  font-size: clamp(40px, 7vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: var(--type-hero-weight);
  background: linear-gradient(120deg,
    var(--color-on-background) 0%,
    var(--color-accent) 52%,
    var(--color-aurora-indigo) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-lead {
  max-width: 52ch;
  margin: 0 auto var(--space-2xl);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.hero-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero-note {
  margin-top: var(--space-lg);
  color: var(--color-text-secondary);
  font-size: var(--type-caption-size);
}

/* ---- The product shot, drawn in CSS ---- */
.stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: var(--space-2xl) var(--space-xl) var(--space-4xl);
  perspective: 1600px;
}

.mac, .tablet {
  border-radius: var(--radius-xl);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--color-on-background) 82%, var(--color-background)),
    color-mix(in srgb, var(--color-on-background) 94%, var(--color-background)));
  padding: var(--space-md);
  box-shadow: var(--shadow-lifted);
}

.mac { flex: 0 1 720px; transform: rotateY(4deg) rotateX(2deg); }

/* Lower and overlapping, so it reads as the desktop continuing onto a second screen. */
.tablet {
  flex: 0 0 210px;
  margin-left: calc(var(--space-3xl) * -1);
  margin-bottom: calc(var(--space-3xl) * -1);
  transform: rotateY(-8deg) rotateX(2deg);
  z-index: 2;
}

/* The desktop itself. One gradient continues across both screens — that IS the product. */
.screen {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(120% 120% at 10% 0%,
      color-mix(in srgb, var(--color-glow-cyan) 55%, var(--color-background)) 0%,
      transparent 55%),
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-accent) 62%, var(--color-background)),
      color-mix(in srgb, var(--color-aurora-indigo) 58%, var(--color-background)));
}

.tablet .screen { aspect-ratio: 10 / 14; }

/* A menu bar and a floating window make it read as a desktop rather than a gradient. */
.menubar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 18px;
  padding: 0 var(--space-sm);
  background: color-mix(in srgb, var(--color-background) 30%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.menubar i {
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-background) 75%, transparent);
}

.window {
  position: absolute;
  left: 12%; top: 26%; right: 16%; bottom: 14%;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-background) 88%, transparent);
  box-shadow: var(--shadow-lifted);
  overflow: hidden;
}

.window-bar {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-outline);
}

.window-bar i {
  width: 7px; height: 7px;
  border-radius: var(--radius-pill);
  background: var(--color-outline);
}

.window-lines { padding: var(--space-md); display: grid; gap: var(--space-sm); }
.window-lines i { display: block; height: 6px; border-radius: var(--radius-pill); background: var(--color-outline); }
.window-lines i:nth-child(1) { width: 70%; }
.window-lines i:nth-child(2) { width: 92%; }
.window-lines i:nth-child(3) { width: 54%; }

/* The touch point — the one detail that says "you can reach in and touch this". */
.touch {
  position: absolute;
  left: 46%; top: 58%;
  width: 34px; height: 34px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-background) 55%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-background) 75%, transparent);
  animation: tap 3.2s ease-in-out infinite;
}

@keyframes tap {
  0%, 70%, 100% { transform: scale(1); opacity: 0.85; }
  35% { transform: scale(0.78); opacity: 1; }
}

/* ---- Bento feature grid ---- */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  max-width: 1120px;
  margin-inline: auto;
  padding: 0 var(--space-xl) var(--space-4xl);
}

/* The lead benefit earns double width — a flat 3x2 grid gives every claim equal weight,
   which is the same as giving none of them any. */
.feature--wide { grid-column: span 2; }

.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--color-surface-raised);
  border: 1px solid var(--color-outline);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--motion-standard) var(--motion-standard-easing),
    box-shadow var(--motion-standard) var(--motion-standard-easing),
    border-color var(--motion-standard) var(--motion-standard-easing);
}

.feature:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-outline));
  box-shadow: var(--shadow-lifted);
}

.feature h2 { font-size: var(--type-title-size); line-height: var(--type-title-line); letter-spacing: -0.02em; }
.feature p { color: var(--color-text-secondary); }

.feature-icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-sm);
  border-radius: var(--radius-md);
  background: linear-gradient(140deg,
    color-mix(in srgb, var(--color-accent) 18%, var(--color-background)),
    color-mix(in srgb, var(--color-aurora-indigo) 14%, var(--color-background)));
  color: var(--color-accent-strong);
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--color-outline);
  padding: var(--space-2xl) var(--space-2xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: var(--color-text-secondary);
  font-size: var(--type-caption-size);
}

.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-lg); }

.site-footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--motion-standard) var(--motion-standard-easing);
}

.site-footer a:hover { color: var(--color-on-background); }

/* ---- Narrow screens ---- */
@media (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .feature--wide { grid-column: span 2; }
}

@media (max-width: 720px) {
  .site-header { padding: var(--space-md) var(--space-lg); }
  .nav a:not(.btn) { display: none; }
  /* "Download for Mac" plus the wordmark overflows a 430px viewport; the hero CTA carries
     the full label, so the header one can shorten. */
  .site-header .btn { padding: var(--space-sm) var(--space-lg); font-size: var(--type-label-size); }
  .site-header .btn .btn-long { display: none; }

  .stage { flex-direction: column; align-items: center; gap: var(--space-xl); perspective: none; }

  /* flex-basis is the MAIN size — once the container is a column, `flex: 0 1 720px` means a
     720px-TALL frame, not a wide one. Reset to auto so both size to their content. */
  .mac, .tablet { flex: 0 0 auto; transform: none; width: 100%; margin: 0; }
  .tablet { max-width: 58%; }

  .features { grid-template-columns: 1fr; }
  .feature--wide { grid-column: span 1; }
}

/* Motion is decoration here; none of it carries meaning, so all of it can go. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .btn:hover, .feature:hover { transform: none; }
}