:root {
  --page: #ffffff;
  --card: #f6f6f6;
  --ink: #161514;
  --muted: #71706f;
  --tertiary: #afafaf;
  --pad: 64px;
  --content-width: 1280px;
  --content-gutter: 40px;
  --navigation-icon-size: 12px;
  --gap: 64px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, Inter, sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { background: var(--page); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--page); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; }
/* AVIF/WebP wrappers from the build: the img lays out as if picture weren't there */
picture { display: contents; }
/* otherwise the empty source takes the img's grid cell in centred card layouts */
picture source { display: none; }
button { font: inherit; }

.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  background: #ffffff;
  color: var(--ink);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease;
}

.home-page .nav {
  position: fixed;
  background: transparent;
}

.home-page .nav.is-scrolled,
.home-page .nav:has(.device-menu.open) {
  background: #ffffff;
}

.nav-inner {
  position: relative;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
}

.content-frame {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--content-gutter);
}

.nav-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: 20px;
  text-decoration: none;
}

.nav-logo-icon {
  width: 15px;
  width: 1cap;
  height: 15px;
  height: 1cap;
  flex: 0 0 15px;
  flex-basis: 1cap;
  border-radius: 1px;
  background: var(--ink);
}

.nav-logo-text {
  color: inherit;
  font-size: inherit;
  font-weight: 600;
  white-space: nowrap;
}

.nav-links {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 24px;
  transform: translateX(-50%);
}

.nav-devices-trigger,
.nav-placeholder {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.nav-page-link { text-decoration: none; }
.nav-page-link:hover { opacity: .65; }

.nav-devices-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity .2s ease;
}

.nav-devices-trigger:hover { opacity: .65; }

.nav-chevron,
.device-menu-arrow {
  display: block;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.nav-chevron {
  width: 12px;
  height: 12px;
  -webkit-mask-image: url("icons/chevron.svg?v=a94ea67ea9");
  mask-image: url("icons/chevron.svg?v=a94ea67ea9");
  transition: transform .25s ease;
}

.nav-devices-trigger.active .nav-chevron { transform: rotate(180deg); }

.device-menu {
  --device-menu-left: var(--pad);
  --device-menu-right: var(--pad);
  --device-menu-height: 0px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  background: #f6f6f6;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: height .25s ease-out, opacity .15s ease-out, transform .15s ease-out, visibility .15s;
}

.device-menu.open {
  height: var(--device-menu-height);
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.device-menu-list {
  width: 100%;
  padding: 40px var(--device-menu-right) 40px var(--device-menu-left);
}

.device-menu-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 80px;
}

.device-menu-group { min-width: 0; }

.device-menu-group-label {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  opacity: 0;
  transform: translateY(-4px);
}

.device-menu.open .device-menu-group-label {
  animation: device-menu-row-reveal .4s ease-out 40ms both;
}

.device-menu-group-rows { display: grid; }

.device-menu-row {
  display: grid;
  min-height: 48px;
  padding: 12px 0;
  grid-template-columns: 164px minmax(0, 1fr) 12px;
  align-items: start;
  gap: 4px;
  color: var(--ink);
  font-size: 14px;
  line-height: 24px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-4px);
}

.device-menu.open .device-menu-row {
  animation: device-menu-row-reveal .4s ease-out var(--device-row-delay) both;
}

@keyframes device-menu-row-reveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.device-menu-name { font-size: 14px; font-weight: 600; }

.device-menu-meta {
  color: var(--muted);
  text-align: left;
}

.device-menu-arrow {
  width: var(--navigation-icon-size);
  height: var(--navigation-icon-size);
  margin-top: 6px;
  -webkit-mask-image: url("icons/arrow-right.svg?v=8487f9bdde");
  mask-image: url("icons/arrow-right.svg?v=8487f9bdde");
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .15s ease-out, transform .15s ease-out;
}

.device-menu-row:hover .device-menu-arrow,
.device-menu-row:focus-visible .device-menu-arrow {
  opacity: 1;
  transform: translateX(0);
}

.nav-signup {
  display: inline-flex;
  min-height: 38px;
  margin-left: auto;
  padding: 0 16px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.nav-signup:hover { opacity: .86; }
.nav-signup:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

.nav-devices-trigger:focus-visible,
.device-menu-row:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

.nav-hamburger,
.nav-mobile-menu { display: none; }

.nav-hamburger {
  position: relative;
  z-index: 1001;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}

.nav-hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-hamburger.active span:nth-child(2) { opacity: 0; }
.nav-hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-shell {
  width: 100%;
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  padding: 16px;
}

.collection-hero-frame {
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
}

.collection-hero {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--card);
  color: var(--ink);
}

.collection-hero-reveal,
.collection-hero-surface {
  position: absolute;
  inset: 0;
}

.collection-hero-surface { background: var(--card); }

@media (min-width: 769px) {
  .collection-hero-frame {
    height: 240vh;
    height: 240svh;
    min-height: 1632px;
    background: #ffffff;
  }

  .collection-hero {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    min-height: 680px;
    background: #ffffff;
    --hero-reveal-width: 48px;
    --hero-reveal-height: 48px;
    --hero-reveal-progress: 0;
  }

  .collection-hero-reveal {
    top: 50%;
    left: 50%;
    width: var(--hero-reveal-width);
    height: var(--hero-reveal-height);
    overflow: hidden;
    background: var(--card);
    transform: translate(-50%, -50%);
    will-change: width, height;
  }

  .collection-hero-reveal::after {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--card);
    content: "";
    opacity: clamp(0, calc(1 - (var(--hero-reveal-progress) * 4)), 1);
    pointer-events: none;
  }

  .collection-hero-surface {
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    transform: translate(-50%, -50%);
  }

  .collection-hero-image {
    opacity: clamp(0, calc((var(--hero-reveal-progress) - .08) * 2.5), 1);
  }
}

.collection-hero-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(58vw, 760px);
  height: min(72vh, 760px);
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.collection-hero-content {
  position: absolute;
  bottom: var(--pad);
  left: var(--pad);
  z-index: 2;
  width: min(52vw, 760px);
}

.collection-hero-content h1 {
  margin: 0;
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -.055em;
}

.collection-hero-difference { color: inherit; }

@media (min-width: 769px) {
  .collection-hero-heading-line {
    display: block;
    white-space: nowrap;
  }

  .collection-hero-difference {
    position: relative;
    display: inline-block;
    padding-right: .04em;
    margin-right: -.04em;
    color: #c9c9c9;
  }

  .collection-hero-difference::after {
    position: absolute;
    inset: 0;
    color: #e0e1e2;
    content: attr(data-text);
    clip-path: inset(
      var(--difference-clip-top, 50%)
      var(--difference-clip-right, 50%)
      var(--difference-clip-bottom, 50%)
      var(--difference-clip-left, 50%)
    );
    mix-blend-mode: difference;
    opacity: 0;
    pointer-events: none;
  }

  .collection-hero-difference.has-reveal-overlap::after {
    opacity: 1;
  }
}

.collection-hero-content p {
  max-width: 420px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.collection-hero-cta {
  display: inline-flex;
  min-height: 48px;
  margin-top: 26px;
  padding: 0 22px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}

.collection-hero-cta:hover { opacity: .84; transform: translateY(-1px); }
.collection-hero-cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }


.collection-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.collection-card {
  display: block;
  width: 100%;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  break-inside: avoid;
}

.collection-card:focus-visible { outline: 2px solid #171717; outline-offset: 3px; }

.collection-art {
  aspect-ratio: 4 / 5;
  display: grid;
  min-height: 0;
  overflow: hidden;
  padding: 60px;
  place-items: center;
}

.collection-feature-card {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  padding: clamp(20px, 2.2vw, 32px);
  background: #144d8d;
  color: #ffffff;
}

.grainient-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.grainient-container canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.collection-feature-items {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 330px;
  margin: auto;
  flex-direction: column;
  justify-content: center;
  gap: clamp(12px, 1.2vw, 18px);
}

.collection-feature-item {
  display: grid;
  min-width: 0;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: start;
  text-align: left;
}

.collection-feature-item img {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  filter: brightness(0) invert(1);
}

.collection-feature-item h2 {
  grid-column: 2;
  margin: 0;
  color: #ffffff;
  font-size: clamp(11px, .95vw, 14px);
  font-weight: 600;
  line-height: 1.25;
}

.collection-feature-item p {
  grid-column: 2;
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
  line-height: 1.35;
}

/* Legal pages */
.legal-main { padding-bottom: 160px; }
.legal-hero-wrap { padding-top: 16px; padding-bottom: 16px; }
.legal-hero.collection-feature-card {
  height: min(28vw, 350px);
  min-height: 300px;
  aspect-ratio: auto;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}
.legal-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #ffffff;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.05em;
  text-align: center;
}
.legal-hero-logo {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border-radius: 2px;
}
.legal-hero-logo span {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: inherit;
  background: #ffffff;
}
.legal-hero-logo:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.legal-content {
  max-width: 780px;
  margin-top: 120px;
  margin-right: auto;
  margin-left: auto;
}
.legal-lead,
.legal-updated {
  margin: 0 0 72px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.7;
}
.legal-updated { color: var(--muted); }
.legal-license-note {
  display: grid;
  margin: 0 0 72px;
  padding: 24px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  column-gap: 6px;
  border-radius: 8px;
  background: #fafafa;
}
.legal-license-note-icon {
  width: 18px;
  height: 18px;
}
.legal-license-note .license-note {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.legal-license-note div > p:last-child {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.legal-section + .legal-section { margin-top: 36px; }
.legal-section h2 {
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}
.legal-section-body {
  --legal-title-offset: 19px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
.legal-section-body p { margin: 0; }
.legal-section-body > p,
.legal-section-body > h3 {
  padding-left: var(--legal-title-offset);
}
.legal-section-body p + p,
.legal-section-body p + ul,
.legal-section-body ul + p,
.legal-section-body h3 + p,
.legal-section-body p + h3 { margin-top: 18px; }
.legal-section-body h3 {
  margin: 28px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}
.legal-section-body ul {
  display: flex;
  margin: 0;
  padding: 0;
  flex-direction: column;
  list-style: none;
}
.legal-section-body li {
  display: flex;
  align-items: baseline;
  color: var(--muted);
}
.legal-section-body li + li { margin-top: 10px; }
.legal-section-body .sup-number {
  min-width: 11px;
  margin-right: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
}
.legal-section-body .legal-list-copy { min-width: 0; }
.legal-section-body strong { color: var(--ink); font-weight: 400; }
.legal-section-body a { color: var(--ink); text-underline-offset: 3px; }
.legal-section-body a:hover { text-decoration-thickness: 2px; }

/* About page */
.about-main { padding-bottom: 160px; }
.about-content {
  margin-top: 120px;
  margin-right: auto;
  margin-left: auto;
}
.about-copy {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.75;
}
.about-copy p { margin: 0; }
.about-copy p + p { margin-top: 24px; }
.about-process {
  width: 100%;
  margin: 64px 0;
}
.about-process-card {
  display: grid;
  width: 100%;
  aspect-ratio: 15 / 8;
  padding: 60px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--card);
  place-items: center;
}
.about-process-card img {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.about-process-rendered {
  clip-path: inset(0 0 0 100%);
  animation: about-process-slide 10s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: clip-path;
}
@keyframes about-process-slide {
  0%, 20% { clip-path: inset(0 0 0 100%); }
  50%, 70% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}
.about-process figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.about-signoff {
  max-width: 780px;
  margin: 64px auto 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.75;
}
.about-signoff p { margin: 0; }
.about-signoff p + p { margin-top: 6px; color: var(--ink); }

.collection-art img {
  width: 60%;
  height: 60%;
  min-width: 0;
  min-height: 0;
  object-fit: contain;
}

.collection-context {
  padding: 20px;
  background: var(--card);
}

.collection-heading,
.detail-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.collection-heading h2,
.detail-title-row h1 {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -.015em;
}

.collection-heading span,
.detail-title-row span,
.collection-context p,
.detail-tags {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.collection-context p { margin: 5px 0 0; }

.collection-heading .collection-file-count {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 40px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eaeaea;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: .048px;
  white-space: nowrap;
}

.detail-shell {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-block: var(--pad);
  padding-inline: var(--content-gutter);
}

.detail-layout {
  display: flex;
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}

.detail-gallery {
  display: grid;
  flex: 1 1 0;
  width: 0;
  max-width: 750px;
  min-width: 0;
  gap: 14px;
}

.detail-image-wrap {
  width: 100%;
  max-width: 750px;
  aspect-ratio: 3 / 4;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  padding: 120px;
  border-radius: 8px;
  background: var(--card);
}

.detail-image-wrap img {
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: 620px;
  max-height: 820px;
  object-fit: contain;
}

.detail-mobile-hero,
.mobile-thumbnails-container { display: none; }

.detail-context {
  position: sticky;
  top: calc(72px + var(--pad));
  display: flex;
  min-height: calc(100vh - 72px - (var(--pad) * 2));
  min-height: calc(100svh - 72px - (var(--pad) * 2));
  flex: 0 0 480px;
  flex-direction: column;
  width: 480px;
  max-width: 100%;
  padding-top: 4px;
}

.detail-context h1 {
  max-width: 560px;
  margin: 0;
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 600;
}

.product-meta {
  display: flex;
  align-items: baseline;
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.color-picker {
  margin-top: 34px;
}

.color-picker > p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.color-picker > p strong { color: var(--ink); }

.color-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.color-swatch {
  appearance: none;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 3px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  place-items: center;
}

.color-swatch > span {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--swatch);
}

.color-swatch.is-selected {
  border-color: var(--swatch);
}

.color-swatch:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 3px;
}

.color-swatch:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.detail-description {
  margin: 44px 0 0;
  max-width: 39rem;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink);
  letter-spacing: -.01em;
}

.buy-button {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  margin-top: 24px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #171717;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.buy-button span:last-child { color: #ffffff; font-weight: 600; }

.license-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 10pt 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 400;
}

.license-note img {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
  border-radius: 8px;
}

.feature-item {
  min-width: 0;
  padding: 24px;
  border-radius: inherit;
  background: #fafafa;
  text-align: left;
}

.feature-item .feature-icon {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--ink);
  -webkit-mask: var(--feature-icon) center / contain no-repeat;
  mask: var(--feature-icon) center / contain no-repeat;
}

.feature-item h2 {
  margin: 15px 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.feature-item p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* FAQ */
.faq-section {
  padding-block: 200px;
}

.faq-header { margin: 0 auto 32px; text-align: left; }
.faq-header h2 {
  margin: 0;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.03em;
}
.faq-list { display: flex; flex-direction: column; width: 100%; }
@media (min-width: 810px) {
  .faq-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 50px;
    row-gap: 48px;
    align-items: start;
  }
  .faq-header { grid-column: 1; margin: 0; }
  .faq-list { grid-column: 2; margin: 0; }
}
.faq-item {
  overflow: hidden;
}
.faq-item h3 { margin: 0; }
.faq-question {
  display: flex;
  width: 100%;
  padding: 32px 0;
  border: 0;
  align-items: flex-start;
  justify-content: space-between;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.faq-item:first-child .faq-question { padding-top: 0; }
.faq-question:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.faq-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--navigation-icon-size);
  height: var(--navigation-icon-size);
  margin-left: 20px;
  margin-top: calc((1.4em - var(--navigation-icon-size)) / 2);
}
.faq-icon span {
  position: absolute;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .4s cubic-bezier(.32, .72, 0, 1);
}
.faq-icon span:last-child { transform: rotate(90deg); }
.faq-item.open .faq-icon span { transform: rotate(180deg); }
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s cubic-bezier(.32, .72, 0, 1);
}
.faq-answer-inner {
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  opacity: 0;
  transition: padding-bottom .5s cubic-bezier(.32, .72, 0, 1), opacity .35s ease;
}
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer-inner { padding-bottom: 32px; opacity: 1; }
.faq-help { margin: 0; padding-top: 32px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.faq-help a { color: var(--ink); text-decoration: none; }
.faq-help a:hover { text-decoration: underline; }

/* Footer */
.site-footer { background: #000; color: #fff; }
.site-footer-inner { padding-top: 64px; padding-bottom: 64px; }
.footer-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: stretch; gap: 100px; }
.footer-brand { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 32px; }
.footer-disclosure-text { display: flex; flex: 1; max-width: 760px; flex-direction: column; align-items: flex-start; gap: 24px; color: var(--tertiary); font-size: 14px; line-height: 24px; }
.footer-copyright { margin: 0; color: var(--tertiary); font-size: 12px; line-height: 1.6; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}
.footer-legal a,
.footer-collections a,
.footer-logo { color: inherit; text-decoration: none; }
.footer-legal a { color: #fff; font-size: inherit; font-weight: 400; }
.footer-legal a:hover,
.footer-collections a:hover,
.footer-logo:hover { opacity: .68; }
.footer-statement {
  width: 100%;
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.footer-logo {
  display: inline-flex;
  width: max-content;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
}
.footer-logo-mark { width: 15px; height: 15px; border-radius: 1px; background: #fff; }
.footer-collections { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.footer-collections a { color: #fff; font-size: inherit; line-height: inherit; }

/* Landscape tablets keep the desktop split: the context panel stays fixed
   while only the gallery column contracts. */
@media (min-width: 1024px) and (max-width: 1279px) and (min-height: 600px) and (orientation: landscape) {
  .detail-shell { padding-block: 32px; }
  .detail-layout {
    gap: 32px;
  }
  .detail-image-wrap { padding: 72px; }
  .detail-context h1 { font-size: 34px; }
}

/* Portrait tablets and smaller screens stack before the two panes can meet. */
@media (max-width: 1023px),
(min-width: 1024px) and (max-width: 1279px) and (orientation: portrait),
(min-width: 1024px) and (max-width: 1279px) and (max-height: 599px) {
  .detail-shell { padding-block: 24px; }
  .site-shell { padding: 24px; }
  .detail-layout { flex-direction: column; gap: 32px; }
  .detail-context {
    position: static;
    order: 1;
    min-height: 0;
    flex-basis: auto;
    width: 100%;
    padding-top: 0;
  }
  .detail-gallery {
    order: 2;
    width: 100%;
    max-width: none;
  }
  .detail-image-wrap {
    max-width: none;
    padding: clamp(48px, 10vw, 96px);
  }
  .collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  :root { --content-gutter: 32px; }
  .collection-hero-image { top: 38%; width: 88vw; height: 48vh; }
  .collection-hero-content {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px;
  }
  .collection-hero-content h1 { font-size: 34px; }
  .collection-hero-content p { margin-top: 16px; font-size: 15px; }
  .collection-hero-cta { min-height: 44px; margin-top: 20px; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-art {
    aspect-ratio: 5 / 6;
    padding: 0;
  }
  .collection-feature-card {
    aspect-ratio: .708 / 1;
    padding: 14px;
  }
  .collection-feature-items {
    max-width: 340px;
    gap: 32px;
  }
  .collection-feature-item {
    grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 14px;
  }
  .collection-feature-item img {
    width: 22px;
    height: 22px;
  }
  .collection-feature-item h2 { font-size: 14px; }
  .collection-feature-item p {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.4;
  }
  .nav-inner { min-height: 64px; }
  .detail-shell { padding: 0 32px 100px; }
  .site-shell { padding: 14px; }
  .collection-context { padding: 18px; }
  .detail-shell { overflow-x: clip; }
  .detail-image-wrap { padding: 36px; }
  .detail-mobile-hero {
    display: grid;
    width: calc(100% + (var(--content-gutter) * 2));
    aspect-ratio: 3 / 4;
    margin: 0 calc(-1 * var(--content-gutter)) 14px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    place-items: center;
    overflow: hidden;
    padding: 36px;
    background: var(--card);
    touch-action: pan-y;
    will-change: transform;
  }
  .detail-mobile-hero img {
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .mobile-thumbnails-container {
    display: block;
    width: calc(100% + (var(--content-gutter) * 2));
    margin: 0 calc(-1 * var(--content-gutter)) 32px;
    overflow-x: auto;
    padding: 0 0 4px;
    text-align: left;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-thumbnails-container::-webkit-scrollbar { display: none; }
  .mobile-thumbnails-track {
    display: inline-flex;
    gap: 14px;
    padding: 2px var(--content-gutter);
  }
  .mobile-thumbnail {
    appearance: none;
    width: 56px;
    height: 70px;
    flex: 0 0 auto;
    overflow: hidden;
    padding: 5px;
    border: 0;
    border-radius: 8px;
    background: var(--card);
    opacity: .4;
    cursor: pointer;
    transition: opacity .2s ease, transform .2s ease;
  }
  .mobile-thumbnail.is-active {
    opacity: 1;
    transform: translateY(-2px);
  }
  .mobile-thumbnail:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .mobile-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .detail-gallery { display: none; }
  .detail-context h1 { font-size: 34px; }
  .detail-description { margin-top: 36px; }
  .feature-grid { grid-template-columns: 1fr; }
  .faq-section { padding-block: 100px; }
  .faq-header { margin-bottom: 32px; }
  .faq-question { padding: 24px 0; }
  .faq-item.open .faq-answer-inner { padding-bottom: 24px; }
  .site-footer-inner { padding-block: 48px; }
  .footer-bottom { grid-template-columns: minmax(0, 1fr); }
  .footer-brand { grid-row: 2; gap: 20px; }
  .footer-legal, .footer-collections { gap: 12px 24px; }
  .legal-main { padding-bottom: 100px; }
  .legal-hero-wrap.content-frame { width: 100%; padding: 0; }
  .legal-hero.collection-feature-card {
    height: 510px;
    min-height: 0;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .legal-hero-logo {
    top: 32px;
    left: 32px;
  }
  .legal-hero h1 { max-width: 86%; font-size: 34px; }
  .legal-content { margin-top: 80px; }
  .legal-lead, .legal-updated, .legal-license-note { margin-bottom: 56px; }
  .legal-section + .legal-section { margin-top: 36px; }
  .legal-section h2 { font-size: 14px; }
  .about-main { padding-bottom: 100px; }
  .about-content { margin-top: 80px; }
  .about-process { margin: 48px 0; }
  .about-process-card {
    width: calc(100% + (2 * var(--content-gutter)));
    margin-left: calc(-1 * var(--content-gutter));
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  .about-process-card img { object-fit: cover; }
  .about-process figcaption { margin-top: 8px; }
  .about-signoff { margin-top: 48px; }
}

@media (max-width: 809px) {
  .nav-links { display: none; }
  .device-menu { display: none; }
  .nav-signup { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    visibility: hidden;
    transform: translateY(-100%);
    background: #ffffff;
    color: var(--ink);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 120px 32px 0;
    pointer-events: none;
    transition: transform .6s cubic-bezier(.85, 0, .15, 1), visibility .6s;
  }
  .nav-mobile-menu.open {
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
  .nav-mobile-inner {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 120px);
    min-height: calc(100svh - 120px);
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 40px;
    text-align: left;
  }
  .nav-mobile-links {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .nav-mobile-links > a,
  .nav-mobile-device-toggle {
    color: var(--ink);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -.035em;
    text-decoration: none;
    transition: opacity .3s ease;
  }
  .nav-mobile-links a:hover { opacity: .7; }
  .nav-mobile-links:has(.nav-mobile-devices.open) > a { color: #afafaf; }
  .nav-mobile-device-toggle { padding: 0; }
  .nav-mobile-device-toggle .faq-icon { width: 36px; height: 36px; padding: 8px; margin-top: calc((1.6em - 36px) / 2); }
  .nav-mobile-device-toggle .faq-icon span { width: 20px; height: 2px; border-radius: 2px; }
  .nav-mobile-collections { display: flex; flex-direction: column; gap: 20px; padding-left: 20px; font-size: 24px; }
  .nav-mobile-collections a { color: var(--ink); font-size: inherit; font-weight: 600; line-height: 1.4; text-decoration: none; }
  .nav-mobile-devices.open .nav-mobile-collections { padding-top: 24px; padding-bottom: 4px; }
  .nav-mobile-collections { transition: padding .5s cubic-bezier(.32, .72, 0, 1), opacity .4s cubic-bezier(.32, .72, 0, 1); }
  .blur-reveal-word {
    display: inline-block;
    filter: blur(12px);
    opacity: 0;
    transform: translateY(20px);
    transition: filter .8s cubic-bezier(.25, .4, .25, 1), opacity .8s cubic-bezier(.25, .4, .25, 1), transform .8s cubic-bezier(.25, .4, .25, 1);
    will-change: filter, opacity, transform;
  }
  .blur-reveal.visible .blur-reveal-word {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0);
  }
  .nav-mobile-footer {
    margin: auto 0 0;
    padding: 0 0 40px;
    color: var(--tertiary);
    font-size: 12px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 1s ease, transform 1s ease;
  }
  .nav-mobile-footer.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 769px) {
  .detail-shell { padding-bottom: 200px; }
  .legal-hero .legal-hero-logo {
    top: 32px;
    left: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0ms !important; }
  .collection-hero-frame { height: 100vh; height: 100svh; min-height: 680px; }
  .collection-hero-reveal { inset: 0; width: 100%; height: 100%; transform: none; }
  .collection-hero-reveal::after { display: none; }
  .collection-hero-image,
  .collection-hero-content { opacity: 1; }
  .about-process-rendered { animation: none; clip-path: none; }
}