@font-face {
  font-family:Manrope;
  src:url('/assets/manrope.woff2') format('woff2');
  font-style:normal;
  font-weight:200 800;
  font-display:swap
}

:root {
  --paper:#fff;
  --mist:#f4f7fc;
  --ink:#172238;
  --muted:#5b6577;
  --accent:#2d5bd1;
  --tint:#f0f4fc;
  --line:#dde4ef;
  --max-width:1184px;
  font-family:Manrope,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:32px
}

body {
  margin:0
}

button,input,textarea {
  font:inherit
}

button,a {
  -webkit-tap-highlight-color:transparent
}

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

button {
  color:inherit
}

img,svg {
  display:block
}

img {
  max-width:100%;
  height:auto
}

svg {
  width:20px;
  height:20px;
  flex-shrink:0
}

p,h1,h2,h3,figure {
  margin:0
}

p {
  line-height:1.75
}

h1,h2,h3 {
  font-weight:650;
  letter-spacing:-.045em;
  line-height:1.12
}

h1 {
  font-size:clamp(40px,4.9vw,66px)
}

h2 {
  font-size:clamp(30px,3.2vw,40px)
}

h3 {
  font-size:23px;
  letter-spacing:-.025em
}

button {
  cursor:pointer
}

button:disabled {
  cursor:default
}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #2d5bd1;
  outline-offset:5px;
  border-radius:3px
}

::selection {
  background:#c9dbff;
  color:#172238
}

[hidden] {
  display:none!important
}

.shell {
  width:min(var(--max-width),calc(100% - 96px));
  margin-inline:auto
}

.section-space {
  padding-block:88px
}

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

.skip-link {
  position:absolute;
  left:24px;
  top:16px;
  z-index:100;
  padding:12px 20px;
  background:var(--ink);
  color:white;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.app-icon {
  object-fit:contain;
  flex-shrink:0
}

.site-header {
  background:var(--paper)
}

.header-inner {
  display:flex;
  min-height:105px;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line)
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:17px;
  font-weight:750;
  letter-spacing:-.035em;
  white-space:nowrap
}

.monogram {
  border-radius:0
}

.product-brand {
  font-size:20px
}

.site-nav {
  display:flex;
  gap:31px;
  align-items:center;
  font-size:14px;
  font-weight:600
}

.site-nav a {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding-block:12px
}

.site-nav svg {
  width:14px;
  height:14px
}

.site-nav a:hover,.site-footer a:hover {
  color:#2d5bd1
}

.home-hero {
  display:grid;
  grid-template-columns:1.22fr 1fr;
  align-items:center;
  gap:76px;
  min-height:630px;
  padding-block:77px 89px
}

.home-intro h1 {
  max-width:660px
}

.home-intro>p {
  font-size:19px;
  max-width:455px;
  color:var(--muted);
  margin-top:27px
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:49px;
  padding:13px 23px;
  border-radius:8px;
  font-size:14px;
  font-weight:750;
  line-height:1.5;
  transition:background .16s ease,box-shadow .16s ease
}

.button-primary {
  background:#2d5bd1;
  color:#fff;
  border:1px solid transparent
}

.button-primary:hover {
  background:#234bac;
  box-shadow:0 3px 8px #234bac20
}

.home-intro>.button {
  margin-top:32px
}

.app-shelf {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:27px 20px;
  padding:42px 27px 35px;
  border-radius:32px;
  background:var(--mist)
}

.shelf-app {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:11px;
  min-width:0;
  text-align:center
}

.shelf-app .app-icon {
  width:78px;
  height:78px;
  filter:drop-shadow(0 7px 8px #1722380d);
  transition:transform .18s ease
}

.shelf-app:hover .app-icon {
  transform:translateY(-4px)
}

.shelf-app>span {
  font-size:12px;
  font-weight:650;
  white-space:nowrap
}

.catalogue {
  border-top:1px solid var(--line);
  padding-top:64px
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-bottom:38px
}

.section-heading p {
  margin-top:15px;
  color:var(--muted);
  font-size:16px
}

.catalogue-heading {
  align-items:flex-end;
  gap:28px
}

.filter-control {
  flex-shrink:0
}

.filter-buttons {
  display:flex;
  gap:3px;
  align-items:center;
  flex-wrap:wrap;
  padding:4px;
  background:var(--mist);
  border-radius:10px
}

.filter-button {
  border:0;
  padding:9px 13px;
  background:transparent;
  border-radius:7px;
  font-size:12px;
  font-weight:650;
  line-height:1.7;
  white-space:nowrap
}

.filter-button[aria-pressed=true] {
  background:#fff;
  box-shadow:0 1px 4px #18213914;
  color:#244da9
}

.filter-button:hover {
  background:#fff
}

.app-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:48px
}

.app-card {
  position:relative;
  min-width:0;
  border-top:1px solid var(--line)
}

.app-card-link {
  display:flex;
  align-items:flex-start;
  gap:24px;
  min-height:198px;
  padding:32px 8px 32px 0;
  position:relative
}

.app-card .app-icon {
  width:76px;
  height:76px
}

.app-card-copy {
  min-width:0;
  padding-top:3px;
  flex:1
}

.app-card h3 {
  font-size:23px;
  margin-right:20px
}

.app-card p {
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
  margin-top:10px;
  max-width:390px
}

.platform-label {
  display:block;
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
  margin-top:13px;
  font-weight:600
}

.app-card-open {
  color:#7a8699;
  align-self:flex-start;
  padding-top:6px
}

.app-card-open svg {
  width:17px;
  height:17px
}

.app-card-link:hover h3 {
  color:#2d5bd1
}

.app-card-link:hover .app-card-open {
  color:var(--ink)
}

.filter-empty {
  padding:32px 0;
  color:var(--muted)
}

.maker-section {
  background:var(--mist);
  padding-block:80px
}

.maker-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:100px;
  align-items:center
}

.maker-mark {
  font-size:54px;
  line-height:1;
  letter-spacing:-.09em;
  font-weight:750;
  color:#2d5bd1;
  display:inline-block;
  margin-bottom:24px
}

.maker-copy {
  max-width:560px
}

.maker-copy>p {
  font-size:17px;
  color:var(--muted)
}

.maker-copy>p+p {
  margin-top:16px
}

.text-link {
  font-size:14px;
  font-weight:750;
  display:inline-flex;
  align-items:center;
  gap:9px;
  text-decoration:underline;
  text-decoration-color:#bcc9e1;
  text-underline-offset:5px
}

.text-link svg {
  width:15px;
  height:15px
}

.maker-copy>.text-link {
  margin-top:25px
}

.text-link:hover {
  color:#2d5bd1
}

.contact-section {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  padding-block:75px 84px
}

.contact-section h2 {
  font-size:30px
}

.contact-section p {
  color:var(--muted);
  font-size:16px;
  margin-top:10px
}

.contact-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  color:#2d5bd1;
  font-size:18px;
  font-weight:650;
  overflow-wrap:anywhere
}

.contact-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.site-footer {
  border-top:1px solid var(--line)
}

.footer-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:100px;
  font-size:12px;
  color:var(--muted)
}

.site-footer nav {
  display:flex;
  flex-wrap:wrap;
  gap:25px
}

.site-footer p {
  line-height:1.8
}

.product-hero {
  display:grid;
  grid-template-columns:1fr 1.16fr;
  gap:60px;
  align-items:center;
  padding-block:75px 90px;
  min-height:700px
}

.product-identity {
  display:flex;
  align-items:center;
  gap:17px;
  margin-bottom:27px
}

.product-identity .app-icon {
  width:70px;
  height:70px
}

.product-identity>div {
  display:flex;
  flex-direction:column;
  gap:5px
}

.product-name {
  font-size:19px;
  font-weight:750;
  letter-spacing:-.025em
}

.product-platform {
  font-size:12px;
  color:var(--muted);
  line-height:1.65
}

.product-intro h1 {
  font-size:clamp(40px,4.1vw,55px);
  max-width:575px
}

.product-summary {
  font-size:17px;
  color:var(--muted);
  margin-top:25px;
  max-width:510px
}

.hero-actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:22px;
  margin-top:30px
}

.release-status {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  font-weight:600
}

.release-status>span {
  width:6px;
  height:6px;
  background:#728198;
  border-radius:50%
}

.requirements {
  display:flex;
  flex-wrap:wrap;
  gap:4px 14px;
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  margin-top:18px
}

.product-byline {
  font-size:12px;
  color:var(--muted);
  margin-top:20px
}

.product-byline a {
  text-decoration:underline;
  text-decoration-color:#b8c5d9;
  text-underline-offset:4px
}

.product-artwork {
  background:var(--tint);
  border-radius:22px;
  position:relative;
  min-width:0;
  min-height:500px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:40px 27px 28px;
  gap:23px
}

.hero-screenshot {
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  width:100%
}

.hero-screenshot img {
  object-fit:contain;
  max-height:430px;
  width:auto;
  max-width:100%;
  border-radius:8px;
  filter:drop-shadow(0 10px 15px #17223812)
}

.artwork-landscape {
  min-height:460px;
  padding:42px 22px 25px
}

.artwork-landscape .hero-screenshot img {
  width:100%;
  max-height:440px
}

.artwork-portrait {
  padding-top:31px
}

.artwork-portrait .hero-screenshot img {
  max-height:435px;
  max-width:90%
}

.artwork-caption {
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  text-align:center;
  max-width:400px
}

.artwork-icon {
  gap:30px
}

.artwork-icon>.app-icon {
  width:200px;
  height:200px
}

.artwork-icon>span {
  font-size:24px;
  font-weight:650;
  letter-spacing:-.03em
}

.features-section {
  border-top:1px solid var(--line);
  padding-top:61px
}

.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px 42px
}

.feature {
  min-width:0
}

.feature h3 {
  font-size:21px;
  font-weight:700;
  letter-spacing:-.025em
}

.feature p {
  font-size:15px;
  color:var(--muted);
  margin-top:14px;
  line-height:1.8
}

.gallery-section {
  background:var(--mist)
}

.screenshot-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:40px 30px;
  align-items:start
}

.screenshot-figure {
  min-width:0
}

.screenshot-link {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:240px;
  background:#e9eef6;
  border-radius:12px;
  overflow:hidden;
  padding:22px
}

.screenshot-link img {
  max-height:430px;
  object-fit:contain;
  width:auto;
  max-width:100%;
  border-radius:5px;
  filter:drop-shadow(0 6px 9px #17223812)
}

.screenshot-portrait .screenshot-link {
  padding:28px;
  min-height:400px
}

.screenshot-portrait .screenshot-link img {
  max-height:430px
}

.screenshot-figure figcaption {
  font-size:12px;
  line-height:1.7;
  color:var(--muted);
  margin-top:13px;
  max-width:600px
}

.enlarge-mark {
  position:absolute;
  right:12px;
  bottom:12px;
  padding:7px;
  border-radius:50%;
  background:#ffffffeb;
  color:#172238;
  box-shadow:0 1px 5px #17223808
}

.enlarge-mark svg {
  width:14px;
  height:14px
}

.screenshot-link:hover .enlarge-mark {
  background:#fff;
  color:#2d5bd1
}

.gallery-single {
  grid-template-columns:minmax(0,1fr);
  max-width:960px;
  margin-inline:auto
}

.gallery-single .screenshot-link img {
  max-height:650px
}

.faq-section {
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:90px
}

.faq-intro p {
  font-size:15px;
  color:var(--muted);
  margin-top:21px
}

.faq-intro a {
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:#b8c5d9
}

.faq-list {
  min-width:0
}

.faq-item {
  border-bottom:1px solid var(--line)
}

.faq-item:first-child {
  border-top:1px solid var(--line)
}

.faq-item summary {
  font-size:16px;
  line-height:1.6;
  font-weight:650;
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:22px 0
}

.faq-item summary::-webkit-details-marker {
  display:none
}

.faq-indicator {
  position:relative;
  display:block;
  width:16px;
  height:16px;
  flex-shrink:0;
  color:#68768e
}

.faq-indicator::before,.faq-indicator::after {
  content:'';
  position:absolute;
  background:currentColor;
  left:2px;
  right:2px;
  height:1.5px;
  top:7px
}

.faq-indicator::after {
  transform:rotate(90deg)
}

.faq-item[open] .faq-indicator::after {
  display:none
}

.faq-answer {
  padding:0 35px 23px 0
}

.faq-answer p {
  font-size:14px;
  color:var(--muted);
  line-height:1.85;
  white-space:pre-line
}

.related-section {
  background:var(--mist);
  padding-block:65px
}

.related-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px
}

.app-card-compact .app-card-link {
  gap:15px;
  min-height:0;
  padding-block:26px 0
}

.app-card-compact .app-icon {
  width:53px;
  height:53px
}

.app-card-compact h3 {
  font-size:19px
}

.app-card-compact p {
  font-size:12px;
  margin-top:9px
}

.app-card-compact .platform-label {
  font-size:10px;
  margin-top:10px
}

.app-card-compact .app-card-open {
  display:none
}

.credits {
  font-size:11px;
  color:var(--muted);
  line-height:1.8;
  padding-block:22px
}

.credits a {
  text-decoration:underline;
  text-underline-offset:3px
}

.gesture-illustration {
  width:100%;
  max-width:400px
}

.gesture-heading {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  margin-bottom:31px
}

.gesture-heading>span:first-child {
  font-weight:650;
  font-size:19px;
  letter-spacing:-.035em
}

.illustration-label {
  font-size:11px;
  color:var(--muted)
}

.trackpad {
  display:block;
  position:relative;
  min-height:238px;
  width:100%;
  border-radius:21px;
  border:1.5px solid #a6b2c4;
  background:#fff;
  box-shadow:0 3px 0 #dae1ed;
  touch-action:manipulation;
  overflow:hidden
}

.trackpad-fingers {
  position:relative;
  z-index:1;
  display:flex;
  gap:18px;
  justify-content:center;
  align-items:center
}

.trackpad-fingers>span {
  height:41px;
  width:27px;
  border:2px solid #8091ac;
  border-radius:50%;
  background:#f0f4fb;
  transform:rotate(-8deg)
}

.trackpad-fingers>span:nth-child(2) {
  transform:translateY(-9px)
}

.trackpad-fingers>span:nth-child(3) {
  transform:rotate(8deg)
}

.trackpad-pulse {
  position:absolute;
  left:50%;
  top:50%;
  width:155px;
  height:115px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#edf2ff;
  opacity:0
}

.gesture-illustration.is-tapped .trackpad-fingers>span {
  background:#2d5bd1;
  border-color:#2d5bd1
}

.gesture-illustration.is-tapped .trackpad-pulse {
  opacity:1
}

.gesture-feedback {
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  text-align:center;
  padding-top:28px
}

.gesture-result {
  font-size:14px;
  font-weight:750;
  color:#2d5bd1
}

.gesture-hint {
  font-size:11px;
  color:var(--muted)
}

.document-main {
  max-width:820px;
  padding-block:76px 100px
}

.document-heading {
  padding-bottom:35px;
  border-bottom:1px solid var(--line);
  margin-bottom:35px
}

.document-back {
  display:inline-block;
  font-size:13px;
  color:#2d5bd1;
  font-weight:650;
  margin-bottom:22px
}

.document-heading h1 {
  font-size:clamp(36px,4vw,51px);
  letter-spacing:-.04em
}

.document-heading>p {
  font-size:16px;
  color:var(--muted);
  margin-top:20px;
  max-width:650px
}

.document-body {
  font-size:15px;
  line-height:1.8;
  color:var(--muted);
  overflow-wrap:anywhere
}

.document-body h2 {
  font-size:25px;
  color:var(--ink);
  margin-block:38px 17px;
  letter-spacing:-.025em;
  line-height:1.3
}

.document-body h3 {
  font-size:19px;
  color:var(--ink);
  margin-block:28px 12px;
  line-height:1.4
}

.document-body p {
  margin-block:15px
}

.document-body h2:first-child,.document-body p:first-child {
  margin-top:0
}

.document-body ul,.document-body ol {
  padding-left:24px;
  margin-block:18px
}

.document-body li {
  padding-left:4px;
  margin-block:7px
}

.document-body a {
  color:#2d5bd1;
  text-decoration:underline;
  text-underline-offset:4px
}

.document-body strong {
  font-weight:750;
  color:var(--ink)
}

.document-body table {
  border-collapse:collapse;
  width:100%;
  font-size:13px;
  margin-block:24px
}

.document-body th,.document-body td {
  text-align:left;
  padding:12px;
  border:1px solid var(--line);
  vertical-align:top
}

.document-body th {
  background:var(--mist);
  color:var(--ink)
}

.document-body blockquote {
  border-left:3px solid #b9cbea;
  margin:24px 0;
  padding:4px 0 4px 22px
}

.document-body code {
  font-size:.9em;
  background:var(--mist);
  padding:2px 5px;
  border-radius:3px;
  white-space:normal
}

.not-found {
  min-height:65vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  flex-direction:column;
  padding-block:85px
}

.error-code {
  font-size:14px;
  color:var(--muted);
  font-weight:650;
  margin-bottom:20px
}

.not-found h1 {
  font-size:clamp(35px,5vw,60px)
}

.not-found>p:not(.error-code) {
  max-width:530px;
  color:var(--muted);
  margin-top:23px
}

.not-found>.button {
  margin-top:28px
}

.image-dialog {
  border:0;
  padding:0;
  background:#f4f7fc;
  color:var(--ink);
  max-width:min(1160px,calc(100vw - 40px));
  width:max-content;
  max-height:calc(100dvh - 40px);
  border-radius:14px;
  overflow:auto;
  box-shadow:0 25px 100px #07142b40
}

.image-dialog::backdrop {
  background:#142138bd;
  backdrop-filter:blur(5px)
}

.lightbox-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  padding:13px 17px;
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:2
}

.lightbox-count {
  font-size:12px;
  color:var(--muted)
}

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

.lightbox-button {
  border:1px solid var(--line);
  background:#fff;
  min-width:40px;
  min-height:38px;
  padding:8px 11px;
  font-size:13px;
  border-radius:6px
}

.lightbox-button:hover {
  background:#e9effb
}

.lightbox-button:disabled {
  opacity:.35
}

.lightbox-figure {
  padding:25px;
  min-width:250px
}

.lightbox-image {
  margin-inline:auto;
  width:auto;
  max-width:100%;
  max-height:calc(100dvh - 210px);
  object-fit:contain;
  border-radius:5px
}

.lightbox-caption {
  max-width:760px;
  margin:16px auto 0;
  font-size:12px;
  line-height:1.6;
  text-align:center;
  color:var(--muted)
}

@media(min-width:1450px) {
  .home-hero {
    gap:88px;
    min-height:645px
  }
  .app-shelf {
    gap:33px 23px;
    padding-block:44px 39px
  }
  .shelf-app .app-icon {
    width:82px;
    height:82px
  }
}

@media(max-width:1100px) {
  .shell {
    width:calc(100% - 64px)
  }
  .home-hero {
    gap:42px;
    grid-template-columns:1.2fr 1fr;
    min-height:570px;
    padding-block:65px 75px
  }
  .home-intro h1 {
    font-size:51px
  }
  .app-shelf {
    padding:31px 19px;
    gap:23px 14px;
    border-radius:24px
  }
  .shelf-app .app-icon {
    width:67px;
    height:67px
  }
  .shelf-app>span {
    font-size:11px
  }
  .catalogue-heading {
    display:block
  }
  .filter-control {
    margin-top:27px
  }
  .filter-buttons {
    display:inline-flex
  }
  .maker-grid {
    gap:55px
  }
  .product-hero {
    gap:38px;
    min-height:640px;
    padding-block:60px 72px
  }
  .product-intro h1 {
    font-size:45px
  }
  .product-artwork {
    min-height:440px;
    padding-inline:20px
  }
  .hero-screenshot img,.artwork-portrait .hero-screenshot img {
    max-height:380px
  }
  .feature-grid {
    gap:35px 30px
  }
  .related-grid {
    gap:25px
  }
  .app-card-compact .app-card-link {
    flex-direction:column
  }
  .contact-link {
    font-size:16px
  }
  .contact-section h2 {
    font-size:27px
  }
  .faq-section {
    gap:55px
  }
  .trackpad {
    min-height:207px
  }
  .gesture-heading>span:first-child {
    font-size:17px
  }
  .gesture-hint {
    max-width:230px
  }
}

@media(max-width:800px) {
  .shell {
    width:calc(100% - 48px)
  }
  .header-inner {
    min-height:88px
  }
  .site-nav {
    gap:20px;
    font-size:12px
  }
  .brand {
    font-size:15px;
    gap:9px
  }
  .brand .monogram {
    width:29px;
    height:29px
  }
  .product-brand {
    font-size:18px
  }
  .product-brand .app-icon {
    width:34px;
    height:34px
  }
  .home-hero {
    gap:30px;
    grid-template-columns:1.1fr 1fr;
    min-height:520px;
    padding-block:65px
  }
  .home-intro h1 {
    font-size:42px
  }
  .home-intro>p {
    font-size:16px;
    margin-top:23px
  }
  .home-intro>.button {
    margin-top:25px
  }
  .app-shelf {
    padding:29px 12px 25px;
    gap:20px 9px;
    border-radius:21px
  }
  .shelf-app .app-icon {
    width:56px;
    height:56px
  }
  .shelf-app>span {
    font-size:9px
  }
  .app-card-link {
    gap:19px;
    padding-block:29px;
    min-height:213px
  }
  .app-card .app-icon {
    width:59px;
    height:59px
  }
  .app-grid {
    column-gap:30px
  }
  .app-card h3 {
    font-size:20px
  }
  .app-card p {
    font-size:13px
  }
  .app-card-open {
    display:none
  }
  .section-space {
    padding-block:65px
  }
  .maker-grid {
    gap:40px;
    grid-template-columns:1fr 1.2fr
  }
  .maker-copy>p {
    font-size:15px
  }
  .maker-mark {
    font-size:44px
  }
  .contact-section {
    display:block;
    padding-block:60px
  }
  .contact-link {
    margin-top:25px
  }
  .product-hero {
    grid-template-columns:1fr 1fr;
    gap:27px;
    min-height:600px
  }
  .product-intro h1 {
    font-size:37px
  }
  .product-summary {
    font-size:15px;
    margin-top:20px
  }
  .product-identity {
    gap:12px;
    margin-bottom:23px
  }
  .product-identity .app-icon {
    width:59px;
    height:59px
  }
  .product-name {
    font-size:17px
  }
  .product-artwork {
    min-height:410px;
    padding-inline:16px
  }
  .artwork-portrait .hero-screenshot img {
    max-height:340px
  }
  .artwork-landscape {
    min-height:340px
  }
  .hero-actions {
    gap:14px;
    margin-top:25px
  }
  .button {
    font-size:13px;
    padding-inline:19px;
    min-height:46px
  }
  .release-status {
    font-size:11px
  }
  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:32px
  }
  .feature h3 {
    font-size:20px
  }
  .feature p {
    font-size:14px
  }
  .faq-section {
    grid-template-columns:1fr 1.4fr;
    gap:35px
  }
  .faq-item summary {
    font-size:14px;
    padding-block:20px
  }
  .faq-answer {
    padding-right:10px
  }
  .faq-answer p {
    font-size:13px
  }
  .faq-intro p {
    font-size:13px
  }
  .related-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px
  }
  .related-section .section-heading {
    align-items:flex-end
  }
  .app-card-compact .app-icon {
    width:48px;
    height:48px
  }
  .app-card-compact h3 {
    font-size:18px
  }
  .app-card-compact p {
    font-size:12px
  }
  .app-card-compact .app-card-link {
    gap:14px
  }
  .screenshot-link {
    min-height:195px;
    padding:15px
  }
  .screenshot-portrait .screenshot-link {
    padding:22px;
    min-height:350px
  }
  .screenshot-portrait .screenshot-link img {
    max-height:330px
  }
  .screenshot-gallery {
    gap:30px 24px
  }
  .trackpad {
    min-height:182px;
    border-radius:17px
  }
  .trackpad-fingers {
    gap:12px
  }
  .trackpad-fingers>span {
    width:23px;
    height:35px
  }
  .gesture-heading>span:first-child {
    font-size:15px
  }
  .gesture-heading {
    margin-bottom:25px
  }
  .illustration-label {
    font-size:10px
  }
  .gesture-feedback {
    padding-top:24px
  }
  .gesture-result {
    font-size:12px
  }
  .gesture-hint {
    font-size:10px
  }
  .footer-inner {
    min-height:91px
  }
  .site-footer nav {
    gap:18px
  }
}

@media(max-width:620px) {
  html {
    scroll-padding-top:24px
  }
  .shell {
    width:calc(100% - 40px)
  }
  .header-inner {
    min-height:79px;
    gap:15px
  }
  .brand {
    font-size:14px
  }
  .brand .monogram {
    width:27px;
    height:27px
  }
  .site-nav {
    gap:17px;
    font-size:11px
  }
  .site-nav a {
    gap:4px
  }
  .site-nav svg {
    width:12px;
    height:12px
  }
  .home-hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:43px;
    padding-block:47px 52px;
    min-height:0
  }
  .home-intro h1 {
    font-size:clamp(39px,8.1vw,51px);
    max-width:510px;
    line-height:1.11
  }
  .home-intro>p {
    font-size:16px;
    max-width:465px;
    line-height:1.75;
    margin-top:21px
  }
  .desktop-break {
    display:none
  }
  .home-intro>.button {
    margin-top:26px
  }
  .app-shelf {
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:23px 11px;
    padding:28px 15px 25px;
    border-radius:18px
  }
  .shelf-app .app-icon {
    width:58px;
    height:58px
  }
  .shelf-app>span {
    font-size:9px;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere
  }
  .shelf-app {
    gap:8px
  }
  .section-space {
    padding-block:48px
  }
  h2 {
    font-size:30px
  }
  .section-heading {
    margin-bottom:28px;
    gap:20px
  }
  .section-heading p {
    font-size:14px;
    margin-top:12px
  }
  .catalogue-heading {
    margin-bottom:28px
  }
  .filter-control {
    margin-top:24px
  }
  .filter-button {
    padding:8px 13px;
    font-size:11px
  }
  .filter-buttons {
    max-width:100%;
    gap:1px
  }
  .app-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .app-card-link {
    min-height:0;
    gap:21px;
    padding:27px 0
  }
  .app-card .app-icon {
    width:65px;
    height:65px
  }
  .app-card-copy {
    padding-top:2px
  }
  .app-card h3 {
    font-size:22px
  }
  .app-card p {
    font-size:13px;
    max-width:none;
    margin-top:9px
  }
  .platform-label {
    font-size:10px;
    margin-top:11px
  }
  .app-card-open {
    display:block
  }
  .app-card-open svg {
    width:15px;
    height:15px
  }
  .maker-section {
    padding-block:49px
  }
  .maker-grid {
    display:block
  }
  .maker-mark {
    margin-bottom:18px;
    font-size:43px
  }
  .maker-copy {
    margin-top:25px
  }
  .maker-copy>p {
    font-size:15px
  }
  .maker-copy>.text-link {
    margin-top:21px
  }
  .contact-section {
    padding-block:47px 52px
  }
  .contact-section h2 {
    font-size:27px;
    max-width:320px
  }
  .contact-section p {
    font-size:14px
  }
  .contact-link {
    font-size:16px;
    gap:9px
  }
  .contact-link svg {
    width:17px;
    height:17px
  }
  .footer-inner {
    padding-block:23px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    min-height:0;
    font-size:11px
  }
  .site-footer nav {
    gap:23px
  }
  .product-brand {
    font-size:17px
  }
  .product-brand .app-icon {
    width:31px;
    height:31px
  }
  .product-hero {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:35px;
    padding-block:40px 50px;
    min-height:0
  }
  .product-identity .app-icon {
    width:62px;
    height:62px
  }
  .product-identity {
    margin-bottom:23px;
    gap:14px
  }
  .product-name {
    font-size:19px
  }
  .product-platform {
    font-size:11px
  }
  .product-intro h1 {
    font-size:clamp(37px,8vw,47px);
    max-width:530px
  }
  .product-summary {
    font-size:16px;
    margin-top:21px;
    max-width:480px
  }
  .hero-actions {
    margin-top:26px;
    gap:21px
  }
  .release-status {
    font-size:12px
  }
  .product-byline {
    margin-top:16px;
    font-size:11px
  }
  .requirements {
    font-size:10px;
    margin-top:16px
  }
  .product-artwork {
    min-height:0;
    border-radius:17px;
    padding:26px 20px 20px;
    gap:18px
  }
  .artwork-landscape {
    padding:28px 17px 20px;
    min-height:290px
  }
  .artwork-portrait .hero-screenshot img {
    max-height:440px
  }
  .artwork-caption {
    font-size:10px;
    max-width:360px
  }
  .artwork-icon {
    min-height:330px;
    gap:23px
  }
  .artwork-icon>.app-icon {
    width:150px;
    height:150px
  }
  .artwork-icon>span {
    font-size:23px
  }
  .features-section {
    padding-top:45px
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:27px
  }
  .feature h3 {
    font-size:20px
  }
  .feature p {
    font-size:14px;
    margin-top:11px
  }
  .screenshot-gallery {
    grid-template-columns:1fr;
    gap:30px
  }
  .screenshot-link {
    min-height:190px;
    padding:18px
  }
  .screenshot-link img {
    max-height:480px
  }
  .screenshot-portrait .screenshot-link {
    padding:27px;
    min-height:0
  }
  .screenshot-portrait .screenshot-link img {
    max-height:450px
  }
  .screenshot-figure figcaption {
    font-size:11px;
    margin-top:11px
  }
  .gallery-single .screenshot-link img {
    max-height:480px
  }
  .faq-section {
    display:block
  }
  .faq-intro p {
    font-size:14px;
    margin-top:16px
  }
  .faq-list {
    margin-top:28px
  }
  .faq-item summary {
    font-size:15px;
    padding-block:20px
  }
  .faq-answer p {
    font-size:14px
  }
  .faq-answer {
    padding-bottom:20px;
    padding-right:15px
  }
  .related-section .section-heading {
    display:block
  }
  .related-section .section-heading>.text-link {
    margin-top:20px
  }
  .related-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .app-card-compact .app-card-link {
    flex-direction:row;
    padding-block:24px;
    gap:19px
  }
  .app-card-compact .app-icon {
    width:55px;
    height:55px
  }
  .app-card-compact h3 {
    font-size:21px
  }
  .app-card-compact p {
    font-size:13px
  }
  .app-card-compact .app-card-open {
    display:block
  }
  .credits {
    font-size:10px;
    padding-block:20px
  }
  .artwork-gesture {
    padding:30px 28px
  }
  .gesture-illustration {
    max-width:350px
  }
  .gesture-heading>span:first-child {
    font-size:18px
  }
  .illustration-label {
    font-size:10px
  }
  .trackpad {
    min-height:218px
  }
  .trackpad-fingers {
    gap:17px
  }
  .trackpad-fingers>span {
    width:26px;
    height:40px
  }
  .gesture-result {
    font-size:14px
  }
  .gesture-hint {
    font-size:11px;
    max-width:none
  }
  .document-main {
    padding-block:43px 60px
  }
  .document-heading {
    padding-bottom:27px;
    margin-bottom:29px
  }
  .document-heading h1 {
    font-size:37px
  }
  .document-heading>p {
    font-size:14px;
    margin-top:17px
  }
  .document-back {
    font-size:12px;
    margin-bottom:18px
  }
  .document-body {
    font-size:14px
  }
  .document-body h2 {
    font-size:22px;
    margin-block:31px 15px
  }
  .document-body h3 {
    font-size:18px
  }
  .document-body table {
    font-size:11px
  }
  .document-body th,.document-body td {
    padding:8px
  }
  .image-dialog {
    max-width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    border-radius:10px
  }
  .lightbox-toolbar {
    padding:10px 12px
  }
  .lightbox-figure {
    padding:17px 13px;
    min-width:0
  }
  .lightbox-image {
    max-height:calc(100dvh - 190px)
  }
  .lightbox-caption {
    font-size:11px
  }
  .lightbox-button {
    min-height:36px;
    padding:7px 10px;
    font-size:12px
  }
  .lightbox-count {
    font-size:11px
  }
  .not-found {
    padding-block:60px;
    min-height:60vh
  }
  .not-found h1 {
    font-size:38px
  }
  .not-found>p:not(.error-code) {
    font-size:15px
  }
}

@media(max-width:380px) {
  .shell {
    width:calc(100% - 32px)
  }
  .header-inner {
    gap:10px
  }
  .brand {
    font-size:12px;
    gap:7px
  }
  .brand .monogram {
    width:25px;
    height:25px
  }
  .site-nav {
    gap:13px;
    font-size:10px
  }
  .site-nav svg {
    display:none
  }
  .product-brand {
    font-size:16px
  }
  .product-brand .app-icon {
    width:28px;
    height:28px
  }
  .home-intro h1 {
    font-size:37px
  }
  .home-intro>p {
    font-size:15px
  }
  .app-shelf {
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:26px 20px;
    gap:22px 17px
  }
  .shelf-app .app-icon {
    width:61px;
    height:61px
  }
  .shelf-app>span {
    font-size:10px
  }
  .filter-button {
    padding:8px 9px;
    font-size:10px
  }
  .app-card-link {
    gap:16px
  }
  .app-card .app-icon {
    width:58px;
    height:58px
  }
  .app-card p {
    font-size:12px
  }
  .app-card h3 {
    font-size:20px
  }
  .app-card-open {
    display:none
  }
  .product-intro h1 {
    font-size:36px
  }
  .product-summary {
    font-size:15px
  }
  .trackpad {
    min-height:191px
  }
  .gesture-heading>span:first-child {
    font-size:16px
  }
  .artwork-gesture {
    padding:27px 22px
  }
  .contact-link {
    font-size:14px
  }
  .contact-link svg {
    width:15px;
    height:15px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .shelf-app:hover .app-icon {
    transform:none
  }
}
/* Store icon assets have square source canvases; use the same native app mask. */
.app-icon { border-radius: 22%; }
.viewer-invitation { padding-block: 1.5rem 4rem; }
.viewer-invitation p { max-width: 65ch; margin-block: 1rem 1.5rem; color: var(--muted, #5b6577); }
.legal-notices { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
@media (max-width: 620px) {
  .app-shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 12px; }
  .shelf-app > span { font-size: 11px; white-space: nowrap; }
}