/* =========================================================================
   Strapps Apps
   -------------------------------------------------------------------------
   Shape system: compact buttons, softly rounded product surfaces, and
   physical device frames. Per-app colours belong to content; teal is the
   studio accent. Shared tokens also style the two legal pages.

   Z-index scale (nothing outside this list):
     0  desk scene, section backgrounds, the studio photograph
     1  the spine, the app straps and their rings
     2  section content, the tablet, the devices
     10 site chrome (nav)
     30 skip link
     60 grain

   Colour: the page chrome is teal everywhere. The per-app strap colours are
   content, set from data.js, the way a chart colours its series. The spine is
   coral, the brand's second colour, and belongs to the studio rather than to
   any one app.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/outfit-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  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: 'Outfit';
  src: url('../assets/fonts/outfit-var-latinext.woff2') format('woff2');
  font-weight: 100 900;
  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;
}

/* The strap draw progress is a real animatable number, not a string.
 * It is set on a strap group and has to reach every path inside it. */
@property --draw {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

/* --------------------------------------------------------------- tokens */
:root {
  color-scheme: light dark;

  --brand-teal: #549c9c;
  --brand-coral: #f09084;

  --font-display: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --r-surface: 20px;
  --r-device: 28px;
  --r-inner: 12px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* light theme */
  --wall: #f5f4ed;
  --wall-far: #eeeee6;
  --desk: #f5f4ed;
  --desk-far: #eeeee6;
  --desk-edge: #ded7c8;
  --surface: #fcfcf8;
  --surface-2: #f0f1e9;
  --line: #d6dcd0;
  --line-soft: #e4e7dd;
  --ink: #203b35;
  --ink-2: #4f6362;
  --ink-3: #556564;
  --accent: #30645b;
  --accent-hover: #234c45;
  --accent-ink: #ffffff;
  --accent-wash: #e7eee8;
  --spine: #e8836f;
  --spine-dark: #b85a48;
  --shadow-hue: 40 46 44;
  --tablet-frame: #e9e1d4;
  --tablet-edge: #cdc2ae;
  --screen: #ffffff;
  --stand: #f0b3a6;
  --horizon: rgb(255 255 255 / 0.75);
  --grain: 0.035;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --wall: #14181a;
    --wall-far: #0e1113;
    --desk: #1a2023;
    --desk-far: #101517;
    --desk-edge: #262e31;
    --surface: #1c2124;
    --surface-2: #232a2d;
    --line: #313a3d;
    --line-soft: #262e31;
    --ink: #e9e6df;
    --ink-2: #a9b4b3;
    --ink-3: #93a09e;
    --accent: #6cc0ba;
    --accent-hover: #8ad3cd;
    --accent-ink: #0d1416;
    --accent-wash: #1d2f30;
    --spine: #e08b78;
    --spine-dark: #8f4436;
    --shadow-hue: 0 0 0;
    --tablet-frame: #262d31;
    --tablet-edge: #131719;
    --screen: #1a2124;
    --stand: #7c4a41;
    --horizon: rgb(255 255 255 / 0.1);
    --grain: 0.05;
  }
}

[data-theme='dark'] {
  --wall: #14181a;
  --wall-far: #0e1113;
  --desk: #1a2023;
  --desk-far: #101517;
  --desk-edge: #262e31;
  --surface: #1c2124;
  --surface-2: #232a2d;
  --line: #313a3d;
  --line-soft: #262e31;
  --ink: #e9e6df;
  --ink-2: #a9b4b3;
  --ink-3: #93a09e;
  --accent: #6cc0ba;
  --accent-hover: #8ad3cd;
  --accent-ink: #0d1416;
  --accent-wash: #1d2f30;
  --spine: #e08b78;
  --spine-dark: #8f4436;
  --shadow-hue: 0 0 0;
  --tablet-frame: #262d31;
  --tablet-edge: #131719;
  --screen: #1a2124;
  --stand: #7c4a41;
  --horizon: rgb(255 255 255 / 0.1);
  --grain: 0.05;
}

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

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  position: relative;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--wall);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* One paper grain over the whole page. Fixed and non-interactive so it never
   repaints while anything scrolls. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

.shell {
  position: relative;
  z-index: 2;
  width: min(100% - 3rem, 1240px);
  margin-inline: auto;
}
@media (max-width: 767px) {
  .shell {
    width: min(100% - 1.75rem, 1240px);
  }
}

/* ------------------------------------------------------------ skip link */
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  
}
.skip:focus {
  top: 1rem;
}

/* ------------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 68px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--wall) 72%, transparent);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(100% - 3rem, 1240px);
  margin-inline: auto;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}
.nav__brand img {
  width: 34px;
  height: 34px;
}
.nav__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.nav__word span {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  font-weight: 500;
}
.nav__links {
  display: flex;
  gap: 1.35rem;
}
.nav__links a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 140ms ease;
}
.nav__links a:hover {
  color: var(--ink);
}
.nav__tools {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.iconbtn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  height: 36px;
  padding-inline: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--ink-2);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, transform 120ms var(--ease-out);
}
.iconbtn .icon {
  font-size: 1.05rem;
}
@media (hover: hover) and (pointer: fine) {
  .iconbtn:hover {
    color: var(--ink);
    border-color: var(--ink-3);
  }
}
.iconbtn:active {
  transform: scale(0.96);
}
@media (max-width: 719px) {
  .nav__links {
    display: none;
  }
}

/* =========================================================== the spine ==
   One coral strap down the whole document, drawn by scroll position. It sits
   above every section background and below every section's content. */
.spine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}
.spine svg {
  display: block;
  width: 100%;
  overflow: visible;
}
.spine__strap path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0; /* fully drawn unless a scroll timeline scrubs it */
}
.spine__cast {
  stroke: rgb(var(--shadow-hue) / 0.16);
  stroke-width: 22;
  filter: blur(7px);
  transform: translateY(9px);
}
.spine__edge {
  stroke: var(--spine-dark);
  stroke-width: 23;
}
.spine__base {
  stroke: var(--spine);
  stroke-width: 19;
}
.spine__shine {
  stroke: #fff;
  stroke-width: 19;
  opacity: 0.15;
  mask: linear-gradient(#fff, transparent 60%);
}
.spine-ring {
  fill: none;
  stroke: var(--brand-teal);
  stroke-width: 13;
  opacity: 0.9;
}
.spine-ring--shade {
  stroke: rgb(var(--shadow-hue) / 0.16);
  stroke-width: 15;
  filter: blur(6px);
  transform: translateY(8px);
}
.spine-tip {
  offset-rotate: auto;
  offset-distance: 100%;
  opacity: 0;
}
.spine-tip__body {
  fill: var(--spine-dark);
}
.spine-tip__face {
  fill: var(--spine);
}
.spine-tip__hole {
  fill: rgb(var(--shadow-hue) / 0.4);
}

/* The strap draws itself as you scroll: the page has one continuous line and
   the reader is pulling it. Scrubbed by a scroll timeline, never a listener. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .spine__strap path {
      animation: spine-draw linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 86%;
    }
    .spine-tip {
      opacity: 1;
      animation: spine-travel linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 86%;
    }
  }
}
@keyframes spine-draw {
  from {
    stroke-dashoffset: 0.88;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes spine-travel {
  from {
    offset-distance: 12%;
  }
  to {
    offset-distance: 100%;
  }
}

/* Route markers. Invisible, they only tell spine.js where the strap goes. */
.spine-node {
  position: absolute;
  width: 1px;
  height: 1px;
}
.spine-node--start {
  left: 50%;
  bottom: 6px;
}
/* The route hugs the left gutter for most of the page. The only place it
   crosses the measure is behind the card grid, where the cards cover it and
   only the gaps show the weave. */
.spine-node--stage-out {
  left: 2.4%;
  bottom: 3%;
}
.spine-node--apps-in {
  left: 2.4%;
  top: 33%;
}
.spine-node--apps-mid {
  right: 3.4%;
  top: 55%;
}
.spine-node--apps-out {
  left: 2.4%;
  bottom: 7%;
}
.spine-node--studio {
  left: 2.4%;
  top: 50%;
}
.spine-node--contact-in {
  left: 2.4%;
  top: 6%;
}
.spine-node--end {
  left: 50%;
  top: 50%;
}

/* --------------------------------------------------------- the app strap */
.strap path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: var(--draw);
}
.strap__cast {
  stroke: rgb(var(--shadow-hue) / 0.22);
  stroke-width: 26;
  filter: blur(7px);
  transform: translateY(10px);
}
.strap__edge {
  stroke: var(--strap-dark);
  stroke-width: 27;
}
.strap__base {
  stroke: var(--strap);
  stroke-width: 23;
}
.strap__shine {
  stroke: #fff;
  stroke-width: 23;
  opacity: 0.16;
  mask: linear-gradient(#fff, transparent 62%);
}
.weave-ring {
  fill: none;
  stroke: var(--brand-teal);
  stroke-width: 15;
  opacity: 0.85;
}
.weave-ring--shade {
  stroke: rgb(var(--shadow-hue) / 0.18);
  stroke-width: 17;
  filter: blur(6px);
  transform: translateY(8px);
}
.strap-tip {
  transition: opacity 160ms ease;
}
.strap-tip__body {
  fill: var(--strap-dark);
}
.strap-tip__face {
  fill: var(--strap);
}
.strap-tip__hole {
  fill: rgb(var(--shadow-hue) / 0.45);
}

/* ---------------------------------------------------------------- panel */
.panel {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
  align-items: center;
}
.panel__device {
  position: relative;
}
.device {
  position: relative;
  border-radius: var(--r-device);
  padding: 9px;
  background: linear-gradient(158deg, var(--tablet-frame), var(--tablet-edge));
  border: 1px solid var(--tablet-edge);
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 45%, transparent) inset,
    0 30px 60px -34px rgb(var(--shadow-hue) / 0.6);
  transition: box-shadow 400ms var(--ease-out);
}
.device[data-awake='true'] {
  box-shadow:
    0 1px 0 color-mix(in srgb, #fff 45%, transparent) inset,
    0 34px 70px -30px color-mix(in srgb, var(--strap) 45%, transparent),
    0 30px 60px -34px rgb(var(--shadow-hue) / 0.6);
}
.device__port {
  position: absolute;
  left: -7px;
  top: 50%;
  translate: 0 -50%;
  width: 14px;
  height: 46px;
  border-radius: 7px;
  background: var(--tablet-edge);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--strap, var(--ink-3)) 70%, transparent);
  transition: box-shadow 300ms var(--ease-out);
}
.device__screen {
  position: relative;
  aspect-ratio: 9 / 19.5;
  border-radius: 21px;
  overflow: hidden;
  background: var(--surface-2);
  cursor: grab;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.device__screen:active {
  cursor: grabbing;
}
.device__track {
  display: flex;
  height: 100%;
  will-change: transform;
}
.device__slide {
  flex: 0 0 100%;
  height: 100%;
  position: relative;
  background: var(--surface-2);
}
.device__slide img,
.device__slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.device__slide video { pointer-events: auto; }
.device__sleep {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 0.82rem;
  transition: opacity 320ms var(--ease-out);
}
.device[data-awake='true'] .device__sleep {
  opacity: 0;
  pointer-events: none;
}
.device__sleep img {
  width: 46px;
  opacity: 0.5;
  transition: opacity 220ms var(--ease-out);
}
/* mid flight the dark screen shows the app that is on its way */
.device__sleep img.device__sleep-icon {
  width: 74px;
  border-radius: 22.5%;
  opacity: 0.42;
}

/* Empty state: an unannounced title gets a sealed screen, not a blank one. */
.device__locked {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  height: 100%;
  padding: 1.75rem;
  text-align: center;
  background:
    radial-gradient(70% 50% at 50% 38%, color-mix(in srgb, var(--strap) 26%, transparent), transparent 70%),
    linear-gradient(180deg, #1b1820, #0d0c11);
}
.device__locked img {
  width: 84px;
  border-radius: 22.5%;
  opacity: 0.9;
}
.device__locked span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #b4aa9a;
}
.device__locked .icon {
  font-size: 1rem;
  color: var(--strap);
}

.device__hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: rgb(12 18 20 / 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .device__screen:hover .device__hint {
    opacity: 1;
  }
}

.device__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: background 180ms ease, width 220ms var(--ease-out);
}
.dot[aria-current='true'] {
  width: 20px;
  background: var(--strap, var(--accent));
}
.navbtn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, transform 120ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .navbtn:hover:not(:disabled) {
    color: var(--ink);
    border-color: var(--ink-3);
  }
}
.navbtn:active:not(:disabled) {
  transform: scale(0.92);
}
.navbtn:disabled {
  opacity: 0.35;
  cursor: default;
}

.panel__copy {
  display: grid;
  gap: 0.85rem;
  align-content: center;
}
.panel__status,
.card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: max-content;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--strap);
  background: color-mix(in srgb, var(--strap) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--strap) 30%, transparent);
}
.panel__name {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  letter-spacing: -0.032em;
}
.panel__tagline {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}
.panel__body {
  color: var(--ink-2);
  font-size: 0.94rem;
  max-width: 46ch;
}
.panel__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  font-size: 0.88rem;
  color: var(--ink-2);
}
.panel__points li {
  display: grid;
  grid-template-columns: 1.1em 1fr;
  gap: 0.5rem;
  align-items: start;
}
.panel__points .icon {
  color: var(--strap);
  margin-top: 0.35em;
  font-size: 0.72em;
}
.panel__note {
  font-size: 0.78rem;
  color: var(--ink-3);
}
.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.25rem;
}

/* ---------------------------------------------------------------- button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), background-color 160ms ease,
    border-color 160ms ease, color 160ms ease;
}
.btn .icon {
  font-size: 1.1rem;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--accent-hover);
  }
}
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover {
    border-color: var(--ink-3);
    background: color-mix(in srgb, var(--surface) 60%, transparent);
  }
}
.btn--small {
  padding: 0.5rem 0.95rem;
  font-size: 0.84rem;
}
.btn:active {
  transform: translateY(1px) scale(0.985);
}

/* ========================================================== the arrival ==
   The strap is a delivery. Nothing about the app may appear before the strap
   gets there, or the mechanic is decoration. Sequence, from the press:

     0ms    the icon takes the press, the strap starts extending
     0ms    the outgoing copy fades away, fast and undelayed
     170ms  the new copy is staged, still invisible
     ~660ms the strap plugs in: the screen powers on, the device seats,
            the socket lights, and the copy comes in a line at a time
   ====================================================================== */

/* the screen is dark until the plug is in */
.device__slide {
  opacity: 0;
  transform: scale(0.965);
  transition:
    opacity 250ms var(--ease-out),
    transform 250ms var(--ease-out);
}
.device[data-awake='true'] .device__slide {
  opacity: 1;
  transform: none;
  filter: none;
}

/* the device takes the weight of the plug going in */
@keyframes device-seat {
  0% {
    transform: none;
  }
  36% {
    transform: scale(1.014);
  }
  100% {
    transform: none;
  }
}
.device.is-seating {
  animation: device-seat 300ms var(--ease-out);
}

/* the socket lights once it has something in it */
.device[data-awake='true'] .device__port {
  box-shadow:
    inset 0 0 0 2px var(--strap),
    0 0 14px -2px color-mix(in srgb, var(--strap) 80%, transparent);
}

/* The copy arrives a line at a time after the old content has faded away. */
.panel__copy > * {
  opacity: 0;
  transform: translateY(9px);
  transition:
    opacity 250ms var(--ease-out),
    transform 250ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 45ms);
}
.panel[data-arrived='true'] .panel__copy > * {
  opacity: 1;
  transform: none;
  filter: none;
}
/* leaving is faster than arriving, and never staggered */
.panel[data-arrived='false'] .panel__copy > * {
  transition-duration: 160ms;
  transition-delay: 0ms;
}

/* the six icons land in the tablet in sequence, after the tablet itself */
.js .desk__hub .appicon__art,
.js .desk__hub .appicon__label {
  opacity: 0;
  transition:
    opacity 420ms var(--ease-out),
    transform 520ms var(--ease-out);
  transition-delay: calc(180ms + var(--i, 0) * 45ms);
}
.js .desk__hub .appicon__art {
  transform: scale(0.88);
}
.js .desk__hub.is-in .appicon__art {
  opacity: 1;
  transform: none;
}
.js .desk__hub.is-in .appicon__label {
  opacity: 1;
}

/* -------------------------------------------------------- entrance motion */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ====================================================== studio art direction
   Ivory, evergreen, and the colours of the apps themselves. Decorative motion
   belongs to the background; the reading and interaction surfaces stay still. */
.shell, .nav__inner, .stage__inner {
  width: min(100% - 7rem, 1320px);
}
section[id] { scroll-margin-top: 96px; }
.nav { height: 80px; border-bottom-color: var(--line-soft); }
.nav__brand { gap: 0.65rem; }
.nav__word { font-size: 1.3rem; letter-spacing: -0.05em; }
.nav__word span { font-size: 0.55rem; letter-spacing: 0.23em; margin-top: 3px; }
.nav__links { gap: 2rem; }
.nav__links a { position: relative; padding: 0.5rem 0; font-size: 0.83rem; }
.nav__links a::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px; background: var(--accent); transform: scaleX(0);
  transform-origin: left; transition: transform 200ms var(--ease-out);
}
.nav__links a[aria-current] { color: var(--ink); }
.nav__links a[aria-current]::after { transform: scaleX(1); }
.nav__tools { margin-left: 1.2rem; padding-left: 1.4rem; border-left: 1px solid var(--line); }
.iconbtn { border: 0; background: transparent; min-width: 40px; height: 40px; justify-content: center; }
.eyebrow {
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.69rem; font-weight: 500; letter-spacing: 0.13em;
  line-height: 1.4; text-transform: uppercase; color: var(--ink-2);
}
.status-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); }

/* -------------------------------------------------------------- hero */
.stage {
  position: relative; display: flex; align-items: center;
  min-height: calc(100dvh - 80px); padding: 72px 0 0;
  isolation: isolate; overflow: clip;
}
.stage__wall { position: absolute; inset: 0; background: var(--wall); z-index: -2; }
.stage__surface {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 90% 45%, color-mix(in srgb, var(--accent-wash) 75%, transparent), transparent 65%);
}
.desk {
  position: relative; display: grid; width: 100%;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  grid-template-rows: auto 1fr; column-gap: clamp(2rem, 4.4vw, 4.75rem); row-gap: 42px;
  align-items: start;
}
.desk__copy { grid-column: 1; grid-row: 1; z-index: 2; }
.desk__hub { grid-column: 1; grid-row: 2; align-self: start; justify-self: start; z-index: 2; }
.desk__panel { grid-column: 2; grid-row: 1 / -1; align-self: center; z-index: 2; }
.desk__straps { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.hero__eyebrow { margin-bottom: 28px; }
.hero__title { font-size: clamp(3.75rem, 5.8vw, 5.75rem); font-weight: 500; line-height: 0.99; letter-spacing: -0.067em; margin-bottom: 24px; }
.hero__title span { display: block; white-space: nowrap; }
.hero__accent { color: var(--accent); }
.hero__sub { color: var(--ink-2); font-size: 1rem; max-width: 35ch; line-height: 1.7; }
.hero__cta { display: inline-flex; align-items: center; gap: 22px; color: var(--ink); text-decoration: none; font-size: 0.86rem; font-weight: 500; margin-top: 27px; }
.arrow-disc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--accent-ink); background: var(--accent); font-size: 1.25rem; transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.stage__meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 25px; margin-top: 56px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 0.7rem; }
.stage__meta > span, .stage__meta > a { display: flex; align-items: center; gap: 10px; }
.stage__meta a { color: var(--ink-2); text-decoration: none; }
.stage__meta a > span:last-child { font-size: 1rem; margin-left: 14px; }
.motion-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px; border: 0; background: transparent; color: var(--ink-3); font-size: inherit; cursor: pointer; }
.motion-toggle:disabled { cursor: default; }
.motion-toggle__symbol { font-size: 0.9rem; width: 12px; }

/* The linked orbit sculpture uses only composited transforms, with a shared
   pause control and an offscreen stop. All geometry remains decorative. */
.orbit-scene { position: absolute; width: 780px; height: 780px; right: -140px; top: -40px; z-index: -1; pointer-events: none; }
.orbit-scene__halo { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand-teal) 13%, transparent), transparent 70%); }
.orbit-scene__ring { position: absolute; inset: 9%; border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); border-radius: 50%; animation: orbit-drift 18s ease-in-out infinite alternate; transform: rotate(-25deg) scaleY(0.75); }
.orbit-scene__ring--two { inset: 19% 2%; border-width: 26px; border-color: color-mix(in srgb, var(--brand-teal) 9%, transparent); transform: rotate(28deg) scaleY(0.7); animation-name: orbit-cross; animation-duration: 22s; }
.orbit-scene__ring--three { inset: 3% 22%; border-width: 17px; border-color: color-mix(in srgb, var(--brand-coral) 15%, transparent); transform: rotate(-32deg) scaleX(0.8); animation-name: orbit-lean; animation-duration: 25s; }
.orbit-scene__satellite { position: absolute; top: 29%; left: 11%; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-teal); box-shadow: inset -3px -3px 4px rgb(30 72 69 / 0.15); animation: satellite-drift 12s ease-in-out infinite alternate; }
@keyframes orbit-drift { to { transform: rotate(15deg) scaleY(0.82) translateY(14px); } }
@keyframes orbit-cross { to { transform: rotate(48deg) scaleY(0.8) translateY(-20px); } }
@keyframes orbit-lean { to { transform: rotate(-12deg) scaleX(0.9) translateX(20px); } }
@keyframes satellite-drift { to { transform: translate(30px, -25px); } }
[data-ambient]:not(.is-visible) *, [data-motion='paused'] [data-ambient] * { animation-play-state: paused; }

/* ----------------------------------------------------------- app picker */
.tablet { position: relative; width: clamp(360px, 36vw, 490px); }
.tablet__body { position: relative; padding: 6px; border-radius: 22px; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--line); box-shadow: 0 14px 34px -24px rgb(var(--shadow-hue) / 0.26), 0 1px 0 var(--surface) inset; }
.tablet__screen { padding: 14px 13px 10px; border-radius: 16px; background: var(--surface); }
.tablet__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: var(--ink-3); font-size: 0.62rem; }
.tablet__number { font-variant-numeric: tabular-nums; font-size: 0.59rem; letter-spacing: 0.06em; }
.tablet__head > span:nth-child(2) { padding-left: 12px; border-left: 1px solid var(--line); }
.tablet__gesture { margin-left: auto; font-size: 0.95rem; }
.tablet__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.tablet__stand, .cast { display: none; }
.appicon { position: relative; display: grid; gap: 7px; align-content: start; justify-items: center; padding: 3px 0 6px; border: 0; border-radius: 10px; background: none; cursor: pointer; transition: transform 200ms var(--ease-out); }
.appicon__art { position: relative; width: 100%; max-width: 61px; aspect-ratio: 1; border-radius: 23%; box-shadow: 0 4px 10px -6px rgb(var(--shadow-hue) / 0.45); }
.appicon__art img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.appicon__art::after { content: ''; position: absolute; inset: -3px; border: 1.5px solid var(--strap, var(--accent)); border-radius: 25%; opacity: 0; transition: opacity 180ms ease; }
.appicon__label { font-size: 0.6rem; line-height: 1.2; color: var(--ink-3); text-align: center; }
.appicon[aria-pressed='true'] .appicon__art::after { opacity: 1; }
.appicon[aria-pressed='true'] .appicon__label { color: var(--ink); }
.appicon:active { transform: scale(0.97); }
.strap__cast { stroke-width: 17px; opacity: 0.7; }
.strap__edge { stroke-width: 14px; }
.strap__base, .strap__shine { stroke-width: 11px; }
.weave-ring { stroke-width: 7px; opacity: 0.65; }
.weave-ring--shade { stroke-width: 10px; opacity: 0.1; }
.spine { opacity: 0.45; }
.spine__base { stroke-width: 10px; }
.spine__edge { stroke-width: 13px; }
.spine__shine { stroke-width: 10px; }
.spine__cast { opacity: 0.3; }

/* --------------------------------------------------------- live preview */
.panel { grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); gap: clamp(1.4rem, 2.5vw, 2.6rem); }
.device { padding: 7px; border-radius: 32px; border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); background: linear-gradient(145deg, var(--surface), var(--tablet-edge)); }
.device__screen { border-radius: 25px; }
.device[data-awake='true'] { box-shadow: 0 30px 65px -35px color-mix(in srgb, var(--strap) 28%, transparent), 0 4px 5px -3px rgb(var(--shadow-hue) / 0.2), 0 0 0 2px var(--surface) inset; }
.device__port { left: -5px; width: 10px; height: 31px; }
.device__bar { gap: 0; margin-top: 17px; }
.dot { position: relative; width: 21px; height: 30px; background: transparent; transition: none; }
.dot::before { content: ''; position: absolute; width: 5px; height: 5px; top: calc(50% - 2.5px); left: calc(50% - 2.5px); border-radius: 3px; background: var(--ink-3); opacity: 0.3; transition: transform 200ms var(--ease-out), opacity 200ms ease; }
.dot[aria-current='true'] { width: 21px; background: transparent; }
.dot[aria-current='true']::before { background: var(--strap, var(--accent)); opacity: 1; transform: scaleX(2.2); }
.navbtn { width: 32px; height: 32px; border: 0; background: transparent; }
.panel__copy { gap: 13px; }
.panel__name { font-size: clamp(1.45rem, 2vw, 1.85rem); line-height: 1.05; font-weight: 500; }
.panel__tagline { font-size: 0.9rem; line-height: 1.45; font-weight: 500; }
.panel__body { font-size: 0.78rem; line-height: 1.75; }
.panel__points { font-size: 0.72rem; gap: 8px; padding-top: 4px; }
.panel__points .icon { color: var(--accent); }
.panel__actions { gap: 8px; margin-top: 6px; }
.panel__actions .btn { font-size: 0.73rem; padding: 10px 14px; }
.panel__actions .btn--ghost { padding-inline: 0; border: 0; }
.panel__status, .card__status { color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.03em; }
.btn { border-radius: 8px; font-weight: 500; }
.btn--primary { box-shadow: 0 3px 0 -1px rgb(var(--shadow-hue) / 0.12); }
.device__slide, .panel__copy > * { filter: none; transition-property: opacity, transform; }
.device__slide { transition-duration: 250ms; }
.panel__copy > * { transition-duration: 250ms; }
.device__sleep { transition-duration: 250ms; }
.panel[data-instant='true'] .panel__copy > *,
.panel[data-instant='true'] .device__slide,
.panel[data-instant='true'] .device__sleep { transition: none; }
.device { transition: box-shadow 250ms ease; }
.device__hint { width: calc(100% - 16px); white-space: normal; text-align: center; justify-content: center; font-size: 0.62rem; border-radius: 8px; }

/* ----------------------------------------------------------- collection */
.apps { position: relative; padding-block: 112px 100px; background: var(--surface); }
.apps__head { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 48px; margin-bottom: 45px; }
.apps__head .eyebrow { margin-bottom: 24px; }
.apps h2 { font-size: clamp(2.7rem, 4.1vw, 4rem); font-weight: 500; letter-spacing: -0.052em; white-space: pre-line; line-height: 1.02; }
.apps__intro { max-width: 34ch; justify-self: end; }
.apps__intro p { color: var(--ink-2); font-size: 0.92rem; line-height: 1.75; }
.collection-count { display: block; margin-top: 23px; color: var(--ink-3); font-size: 0.68rem; letter-spacing: 0.03em; }
.apps__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px; }
.card { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; min-height: 434px; padding: clamp(24px, 2.8vw, 38px); border: 1px solid color-mix(in srgb, var(--strap) 12%, var(--line-soft)); border-radius: 18px; background: color-mix(in srgb, var(--strap) 5%, var(--wall)); }
.card:nth-child(1), .card:nth-child(4) { grid-column: span 7; }
.card:nth-child(2), .card:nth-child(3) { grid-column: span 5; }
.card:nth-child(5), .card:nth-child(6) { grid-column: span 6; }
.card__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; color: var(--ink-3); font-size: 0.62rem; letter-spacing: 0.06em; }
.card__meta > span:last-child { font-variant-numeric: tabular-nums; }
.card__head { display: flex; align-items: center; gap: 10px; max-width: 60%; }
.card__head img { width: 34px; height: 34px; border-radius: 24%; flex: none; }
.card h3 { font-size: 0.82rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; }
.card__tagline { position: relative; z-index: 2; font-family: var(--font-display); font-size: clamp(1.8rem, 2.45vw, 2.45rem); font-weight: 500; line-height: 1.07; letter-spacing: -0.045em; max-width: 56%; margin-top: 22px; color: var(--ink); text-wrap: pretty; }
.card__detail { font-size: 0.75rem; color: var(--ink-2); max-width: 48%; margin-top: 17px; line-height: 1.65; }
.card__halo { position: absolute; width: 350px; aspect-ratio: 1; border-radius: 50%; right: -110px; bottom: -95px; z-index: -1; background: color-mix(in srgb, var(--strap) 12%, transparent); box-shadow: 0 0 0 44px color-mix(in srgb, var(--strap) 3%, transparent); }
.card__shot { position: absolute; z-index: 1; width: 37%; max-width: 222px; height: 325px; object-fit: cover; object-position: top; right: 20px; bottom: -42px; border: 5px solid color-mix(in srgb, var(--surface) 75%, var(--strap)); border-radius: 25px; box-shadow: 0 24px 36px -23px rgb(var(--shadow-hue) / 0.5); transform: rotate(-9deg); transition: transform 250ms var(--ease-out); }
.card:nth-child(2) .card__shot, .card:nth-child(4) .card__shot { transform: rotate(8deg); }
.card__actions { display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; margin-top: auto; padding-top: 26px; }
.card__actions .btn { background: var(--surface); border: 1px solid var(--line); font-size: 0.73rem; padding: 9px 13px; border-radius: 7px; }
.card__preview { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--surface); cursor: pointer; font-size: 1.15rem; transition: transform 200ms var(--ease-out); }
.card--soon { min-height: 360px; background: var(--wall); }
.card--soon .card__meta { margin-bottom: 22px; }
.card--soon .card__status { position: absolute; right: 28px; top: 66px; }
.card--soon .card__tagline { font-size: clamp(1.65rem, 2.2vw, 2.2rem); max-width: 61%; }
.card--soon .card__detail { max-width: 55%; }
.card__symbol { position: absolute; right: -13px; bottom: 16px; width: 218px; height: 218px; z-index: -1; display: grid; place-items: center; }
.card__symbol > span { position: absolute; inset: 7%; border: 1px solid color-mix(in srgb, var(--strap) 24%, transparent); border-radius: 50%; transform: rotate(-35deg) scaleX(0.57); }
.card__symbol > span:nth-child(2) { transform: rotate(35deg) scaleX(0.57); }
.card__symbol img { width: 79px; height: 79px; border-radius: 24%; transform: rotate(-8deg); box-shadow: 0 16px 32px -18px rgb(var(--shadow-hue) / 0.4); }
.js .apps__grid .card { transition: transform 620ms var(--ease-out), opacity 620ms var(--ease-out); transition-delay: 0ms; }
.js .apps__grid .card.is-in { opacity: 1; }

/* --------------------------------------------------------------- studio */
.studio { position: relative; padding: 80px 0 115px; background: var(--surface); }
.studio__layout { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: clamp(48px, 7vw, 106px); }
.studio__media { position: relative; overflow: hidden; border-radius: 18px; background: var(--wall); }
.studio__media img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.studio__caption { display: flex; justify-content: space-between; align-items: center; background: var(--wall); padding: 21px 25px; color: var(--ink-2); font-size: 0.75rem; }
.studio__caption > span:last-child { font-size: 1.3rem; }
.studio__inner { display: grid; gap: 23px; }
.studio h2 { font-size: clamp(2.8rem, 4.2vw, 4.1rem); font-weight: 500; letter-spacing: -0.055em; line-height: 1.02; white-space: pre-line; }
.studio__inner > p:not(.eyebrow) { font-size: 0.87rem; line-height: 1.8; max-width: 48ch; color: var(--ink-2); }
.studio__principles { margin-top: 8px; }
.studio__principles > div { display: grid; grid-template-columns: 30px 1fr; align-items: baseline; gap: 9px; padding: 15px 0; border-top: 1px solid var(--line-soft); }
.studio__principles span { font-size: 0.62rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.studio__principles p { color: var(--ink); font-size: 0.79rem; }

/* -------------------------------------------------------------- contact */
.contact { position: relative; isolation: isolate; overflow: clip; padding: 95px 0 105px; background: var(--accent-wash); text-align: center; }
.contact__inner { display: grid; justify-items: center; gap: 24px; }
.contact h2 { font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 500; line-height: 1.04; letter-spacing: -0.055em; white-space: pre-line; }
.contact p:not(.eyebrow) { color: var(--ink-2); font-size: 0.89rem; max-width: 47ch; line-height: 1.75; }
.contact__actions { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 10px; }
.contact__actions .btn { font-size: 0.82rem; padding: 13px 21px; }
.contact__actions .btn--ghost { border: 0; font-weight: 400; }
.contact__socket { position: relative; width: 42px; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--brand-coral) 70%, var(--wall)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-coral) 14%, transparent); margin-bottom: 7px; }
.contact__orbits { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.contact__orbits span { position: absolute; width: 480px; height: 480px; left: -220px; top: -60px; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); border-radius: 50%; transform: scaleX(0.8) rotate(-30deg); animation: contact-orbit 18s ease-in-out infinite alternate; }
.contact__orbits span:nth-child(2) { left: auto; right: -220px; top: auto; bottom: -130px; border-width: 32px; border-color: color-mix(in srgb, var(--brand-teal) 10%, transparent); animation-direction: alternate-reverse; }
.contact__orbits span:nth-child(3) { left: auto; right: -230px; top: auto; bottom: -110px; border-color: color-mix(in srgb, var(--accent) 15%, transparent); animation-delay: -8s; }
@keyframes contact-orbit { to { transform: scaleX(0.93) rotate(20deg) translateY(28px); } }

/* --------------------------------------------------------------- footer */
.footer { position: relative; padding-block: 55px 0; overflow: hidden; background: var(--wall); color: var(--ink-3); font-size: 0.76rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1.2fr 0.8fr 0.65fr; gap: 32px; padding-bottom: 45px; }
.footer__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.footer__brand img { width: 34px; height: 34px; }
.footer h3 { font-size: 0.65rem; font-weight: 500; color: var(--ink-3); margin-bottom: 18px; letter-spacing: 0.05em; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer a { color: var(--ink-2); text-decoration: none; }
.footer__base { display: flex; flex-wrap: wrap; gap: 8px 20px; border-top: 1px solid var(--line); padding-top: 22px; font-size: 0.65rem; }
.footer__base > span:last-child { margin-left: auto; }
.footer__signature { display: flex; justify-content: space-between; align-items: baseline; padding-top: 30px; font-family: var(--font-display); font-size: clamp(7rem, 22vw, 21rem); letter-spacing: -0.085em; line-height: 0.95; color: color-mix(in srgb, var(--accent) 18%, var(--wall)); font-weight: 500; user-select: none; }
.footer__signature > span { font-size: 0.7em; line-height: 1; font-weight: 300; color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .hero__cta:hover .arrow-disc { transform: rotate(45deg); background: var(--accent-hover); }
  .nav__links a:hover::after { transform: scaleX(1); }
  .appicon:hover { transform: translateY(-3px); }
  .card:hover .card__shot { transform: rotate(-5deg) translateY(-10px); }
  .card:nth-child(2):hover .card__shot, .card:nth-child(4):hover .card__shot { transform: rotate(4deg) translateY(-10px); }
  .card__preview:hover { transform: rotate(45deg); }
  .footer a:hover { text-decoration: underline; color: var(--ink); }
  .motion-toggle:hover, .stage__meta a:hover { color: var(--ink); }
}

/* ----------------------------------------------------------- responsive */
@media (min-width: 1600px) {
  .stage { padding-top: 90px; }
  .desk { row-gap: 55px; }
  .stage__meta { margin-top: 70px; }
}
@media (max-width: 1200px) and (min-width: 1024px) {
  .shell, .nav__inner, .stage__inner { width: calc(100% - 5rem); }
  .desk { column-gap: 42px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hero__title { font-size: 5.8vw; }
  .tablet { width: 100%; }
  .panel { grid-template-columns: minmax(150px, 190px) minmax(0, 1fr); gap: 20px; }
  .panel__body { font-size: 0.72rem; }
  .panel__points { font-size: 0.65rem; }
  .panel__name { font-size: 1.4rem; }
  .panel__actions .btn { font-size: 0.68rem; padding: 9px 10px; }
}
@media (max-width: 1023px) {
  .shell, .nav__inner, .stage__inner { width: calc(100% - 4rem); }
  .stage { padding-top: 52px; min-height: 0; }
  .desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; justify-items: center; row-gap: 32px; text-align: center; }
  .desk__copy { grid-column: 1; grid-row: 1; }
  .hero__eyebrow { justify-content: center; }
  .hero__title { font-size: clamp(3.7rem, 8.5vw, 5.5rem); }
  .hero__sub { max-width: 39ch; margin-inline: auto; }
  .desk__hub { grid-column: 1; grid-row: 2; justify-self: center; }
  .desk__panel { grid-column: 1; grid-row: 3; margin-top: 116px; }
  .tablet { width: min(560px, 76vw); }
  .tablet__grid { gap: 16px; }
  .appicon__label { font-size: 0.6rem; }
  .panel { grid-template-columns: minmax(200px, 250px) minmax(0, 280px); gap: 42px; text-align: left; }
  .panel__body { font-size: 0.86rem; }
  .panel__points { font-size: 0.8rem; }
  .panel__name { font-size: 1.85rem; }
  .device__port { left: 50%; top: -5px; translate: -50% 0; width: 31px; height: 10px; }
  .spine, .contact__socket { display: none; }
  .orbit-scene { right: -300px; top: 200px; }
  .stage__meta { margin-top: 45px; }
  .stage__meta > span { max-width: 27ch; }
  .apps { padding-block: 85px 70px; }
  .apps__head { gap: 30px; grid-template-columns: 1.3fr 1fr; }
  .apps h2 { font-size: 2.7rem; }
  .card:nth-child(n) { grid-column: span 6; }
  .card { min-height: 410px; padding: 24px; }
  .card__tagline { font-size: 1.9rem; max-width: 65%; }
  .card__shot { width: 39%; height: 270px; right: 9px; bottom: -40px; }
  .card__detail { max-width: 58%; }
  .card__head { max-width: 75%; }
  .card--soon { min-height: 370px; }
  .card--soon .card__status { right: 20px; top: 56px; }
  .card--soon .card__head { max-width: 58%; }
  .card__symbol { width: 175px; height: 175px; right: -28px; }
  .card__symbol img { width: 65px; height: 65px; }
  .studio { padding-block: 45px 85px; }
  .studio__layout { gap: 40px; grid-template-columns: 1fr 1fr; }
  .studio__media img { aspect-ratio: auto; }
  .studio h2 { font-size: 2.8rem; }
  .studio__inner > p:not(.eyebrow) { font-size: 0.81rem; }
  .studio__principles p { font-size: 0.73rem; }
}
@media (max-width: 719px) {
  .shell, .nav__inner, .stage__inner { width: calc(100% - 2.5rem); }
  .nav { height: 70px; }
  .nav__inner { gap: 8px; flex-wrap: wrap; }
  .nav__brand img { width: 28px; height: 28px; }
  .nav__word { font-size: 1.13rem; }
  .nav__tools { margin-left: 0; padding-left: 8px; gap: 0; }
  .nav__links { display: flex; gap: 12px; margin-left: auto; }
  .nav__links a { font-size: 0.69rem; }
  .nav__links a:last-child { display: none; }
  .iconbtn { min-width: 30px; padding-inline: 5px; font-size: 0.7rem; }
  #lang-toggle .icon { display: none; }
  .stage { padding-top: 45px; }
  .desk { row-gap: 30px; }
  .hero__eyebrow { margin-bottom: 25px; font-size: 0.59rem; letter-spacing: 0.1em; }
  .hero__title { font-size: clamp(2.65rem, 10.2vw, 4.8rem); margin-bottom: 21px; line-height: 1.02; }
  .hero__sub { font-size: 0.9rem; max-width: 32ch; }
  .hero__cta { font-size: 0.8rem; margin-top: 23px; gap: 18px; }
  .arrow-disc { width: 36px; height: 36px; }
  .tablet { width: min(100%, 420px); }
  .desk__hub { width: 100%; max-width: 420px; }
  .tablet__screen { padding: 12px 9px 7px; }
  .tablet__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
  .appicon__art { max-width: 54px; }
  .appicon__label { font-size: 0.65rem; }
  .tablet__head { font-size: 0.58rem; }
  .desk__panel { margin-top: 105px; width: 100%; }
  .panel { grid-template-columns: minmax(0, 1fr); gap: 32px; justify-items: center; }
  .panel__device { width: min(68vw, 260px); }
  .device { width: 100%; }
  .panel__copy { text-align: center; justify-items: center; max-width: 380px; gap: 14px; }
  .panel__name { font-size: 1.9rem; }
  .panel__tagline { font-size: 1rem; max-width: 29ch; }
  .panel__body { font-size: 0.85rem; max-width: 39ch; }
  .panel__points { font-size: 0.8rem; }
  .panel__points li { text-align: left; }
  .panel__actions { justify-content: center; gap: 20px; }
  .panel__actions .btn { font-size: 0.8rem; padding: 12px 17px; }
  .stage__meta { flex-wrap: wrap; justify-content: center; gap: 10px 30px; padding-block: 20px; margin-top: 38px; }
  .stage__meta > span { display: none; }
  .stage__meta a { font-size: 0.65rem; }
  .motion-toggle { font-size: 0.65rem; }
  .orbit-scene { right: -390px; top: 520px; }
  .apps { padding-block: 66px 45px; }
  .apps__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .apps__head .eyebrow { margin-bottom: 21px; }
  .apps h2 { font-size: clamp(2.2rem, 8.4vw, 3.4rem); }
  .apps__intro { justify-self: start; max-width: 37ch; }
  .apps__intro p { font-size: 0.85rem; }
  .collection-count { margin-top: 16px; font-size: 0.65rem; }
  .apps__grid { gap: 16px; }
  .card:nth-child(n) { grid-column: span 12; }
  .card { min-height: 400px; padding: 24px; border-radius: 14px; }
  .card__meta { font-size: 0.58rem; margin-bottom: 24px; }
  .card__head { max-width: 75%; }
  .card h3 { font-size: 0.85rem; }
  .card__tagline { max-width: 60%; font-size: clamp(1.85rem, 6.8vw, 2.2rem); }
  .card__shot { width: 37%; height: 275px; bottom: -29px; right: 10px; border-width: 4px; border-radius: 18px; }
  .card__detail { font-size: 0.72rem; max-width: 55%; }
  .card--soon { min-height: 350px; }
  .card--soon .card__tagline { font-size: 1.75rem; max-width: 66%; }
  .card--soon .card__status { top: 61px; right: 20px; }
  .card--soon .card__head { max-width: 60%; }
  .card__symbol { right: -20px; bottom: 13px; }
  .studio { padding: 35px 0 65px; }
  .studio__layout { display: flex; flex-direction: column; align-items: stretch; gap: 34px; }
  .studio__inner { order: -1; gap: 22px; }
  .studio h2 { font-size: 3rem; }
  .studio__inner > p:not(.eyebrow) { font-size: 0.86rem; }
  .studio__principles p { font-size: 0.8rem; }
  .studio__media img { aspect-ratio: auto; }
  .studio__caption { padding: 16px 20px; }
  .contact { padding: 65px 0 72px; }
  .contact__inner { gap: 23px; }
  .contact .eyebrow { font-size: 0.61rem; }
  .contact h2 { font-size: clamp(2rem, 8.3vw, 3rem); }
  .contact p:not(.eyebrow) { font-size: 0.82rem; }
  .contact__actions { gap: 8px; flex-direction: column; }
  .contact__orbits { opacity: 0.55; }
  .contact__orbits span { left: -410px; }
  .contact__orbits span:nth-child(n + 2) { right: -410px; }
  .footer { padding-top: 35px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 32px; }
  .footer__grid > div:first-child { grid-column: 1 / -1; }
  .footer__base { font-size: 0.59rem; gap: 8px 12px; }
  .footer__base > span:last-child { margin-left: 0; }
  .footer__signature { font-size: 22vw; padding-top: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-ambient] * { animation: none; }
  .hero__cta:hover .arrow-disc, .card__preview:hover { transform: none; }
  .js .apps__grid .card { transition: opacity 160ms ease; }
  .card:hover .card__shot { transform: rotate(-9deg); }
  .card:nth-child(2):hover .card__shot, .card:nth-child(4):hover .card__shot { transform: rotate(8deg); }
  .nav__links a::after, .dot::before { transition: opacity 160ms ease; }
}


/* Landscape games get a horizontal device and an upright, uncropped screen.
   Only the device transform animates during an orientation change. */
.panel[data-orientation='landscape'] { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.panel[data-orientation='landscape'] .panel__device { width: 100%; }
.panel[data-orientation='landscape'] .device { width: 100%; border-radius: 27px; }
.panel[data-orientation='landscape'] .device__screen { aspect-ratio: 16 / 9; border-radius: 20px; background: #0d1015; }
.panel[data-orientation='landscape'] .device__slide { background: #0d1015; }
.panel[data-orientation='landscape'] .device__slide img { object-fit: contain; }
.panel[data-orientation='landscape'] .panel__copy { grid-template-columns: 1fr 1fr; gap: 12px 24px; align-items: start; }
.panel[data-orientation='landscape'] .panel__status,
.panel[data-orientation='landscape'] .panel__name,
.panel[data-orientation='landscape'] .panel__tagline,
.panel[data-orientation='landscape'] .panel__actions { grid-column: 1 / -1; }
.panel[data-orientation='landscape'] .panel__points { padding-top: 0; }
.device[data-turning='true'] { pointer-events: none; }
@media (max-width: 719px) {
  .panel[data-orientation='landscape'] .panel__copy { grid-template-columns: minmax(0, 1fr); }
  .panel[data-orientation='landscape'] .panel__device { width: 100%; }
  .panel[data-orientation='landscape'] .device { border-radius: 20px; }
  .panel[data-orientation='landscape'] .device__screen { border-radius: 14px; }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  /* Fewer and gentler, not none. Opacity still carries every state change so
     the arrival is still legible; nothing moves or blurs. */
  .js .reveal,
  .js .desk__hub .appicon__art,
  .js .desk__hub .appicon__label,
  .js .apps__grid .card,
  .device__slide {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .panel__copy > * {
    transform: none;
    filter: none;
    transition: opacity 160ms ease;
    transition-delay: 0ms;
  }
  .device.is-seating {
    animation: none;
  }
  .appicon,
  .btn,
  .navbtn,
  .iconbtn,
  .card,
  .card__shot {
    transition-property: color, background-color, border-color, opacity;
  }
  .appicon:hover,
  .appicon:active,
  .appicon[aria-pressed='true'],
  .btn:active,
  .navbtn:active,
  .iconbtn:active,
  .card:hover {
    transform: none;
  }
  .device__track {
    transition: opacity 200ms ease;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: var(--wall);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .device__hint {
    background: rgb(12 18 20 / 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  :root {
    --line: var(--ink-3);
    --ink-2: var(--ink);
  }
  body::after {
    display: none;
  }
}

/* ========================================================== legal pages ==
   Privacy and terms. Same chrome, same tokens, one column of readable prose.
   Both languages live in the markup and CSS picks the one matching <html lang>,
   so the right text is on screen before any script runs. */
html[lang='es'] [data-lang='en'],
html[lang='en'] [data-lang='es'] {
  display: none;
}

.doc {
  padding-block: clamp(2.5rem, 7vh, 4.5rem) clamp(4rem, 10vh, 7rem);
  background: var(--surface);
  min-height: calc(100dvh - 68px);
}
.doc__inner {
  max-width: 68ch;
}
.doc__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  text-decoration: none;
  margin-bottom: 1.75rem;
}
.doc__back .icon {
  font-size: 0.9rem;
  rotate: 180deg;
}
.doc h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 0.6rem;
}
.doc__meta {
  color: var(--ink-3);
  font-size: 0.85rem;
  margin-bottom: 2.5rem;
}
.doc h2 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  margin: 2.75rem 0 0.85rem;
}
.doc h3 {
  font-size: 1.02rem;
  margin: 1.75rem 0 0.5rem;
}
.doc p,
.doc li {
  color: var(--ink-2);
  margin-bottom: 0.9rem;
}
.doc ul {
  padding-left: 1.15rem;
  margin: 0 0 1.1rem;
}
.doc li {
  margin-bottom: 0.5rem;
}
.doc strong {
  color: var(--ink);
  font-weight: 600;
}
.doc a {
  text-decoration: underline;
}
.doc__lead {
  font-size: 1.08rem;
  color: var(--ink);
}
/* a fact table, for the storage disclosure */
.doc__table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
}
.doc__table th,
.doc__table td {
  text-align: left;
  padding: 0.7rem 0.9rem 0.7rem 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink-2);
}
.doc__table th {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.doc__table code {
  font-size: 0.9em;
  color: var(--ink);
}
/* Sections the studio still has to complete before launch. Deliberately loud:
   this must not survive to production unnoticed. */
.doc__todo {
  border: 1px solid color-mix(in srgb, #c8791f 45%, var(--line));
  background: color-mix(in srgb, #c8791f 9%, var(--surface));
  border-radius: var(--r-surface);
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0 1.75rem;
}
.doc__todo p:last-child {
  margin-bottom: 0;
}
.doc__todo strong {
  color: color-mix(in srgb, #8a5410 80%, var(--ink));
}

/* ============================================================= consent ==
   Only rendered when there is something non-essential to consent to. Refuse
   and Accept are the same size and weight: a refusal has to be as easy. */
.consent {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 260ms var(--ease-out),
    transform 320ms var(--ease-out);
}
.consent.is-in {
  opacity: 1;
  transform: none;
}
.consent__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem 1.5rem;
  width: min(100%, 940px);
  margin-inline: auto;
  padding: 1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-surface);
  background: var(--surface);
  box-shadow: 0 24px 60px -30px rgb(var(--shadow-hue) / 0.6);
}
.consent__title {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.15rem;
}
.consent__body {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin: 0;
}
.consent__actions {
  display: flex;
  gap: 0.5rem;
}
.consent__more {
  grid-column: 1 / -1;
  font-size: 0.82rem;
}
@media (max-width: 719px) {
  .consent__inner {
    grid-template-columns: 1fr;
  }
  .consent__actions {
    justify-content: stretch;
  }
  .consent__actions .btn {
    flex: 1;
    justify-content: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .consent {
    transform: none;
    transition: opacity 200ms ease;
  }
}