:root {
  color-scheme:dark;
  --bg:#060a15;
  --surface:#0b1021;
  --text:#f6f5fb;
  --muted:#b3b7ca;
  --accent:#b3a0ff;
  --border:rgba(159,173,234,.15);
  font-family:Inter,"Avenir Next",Avenir,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none
}

* {
  box-sizing:border-box
}

[hidden] {
  display:none!important
}

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

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  -webkit-font-smoothing:antialiased
}

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

button {
  font:inherit;
  color:inherit
}

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

button {
  cursor:pointer
}

img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px
}

::selection {
  background:#7663b7;
  color:white
}

.symbol-library {
  position:absolute;
  width:0;
  height:0
}

.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:100;
  background:var(--text);
  color:var(--bg);
  padding:12px
}

.skip-link:focus {
  top:12px
}

.section-shell {
  padding-left:clamp(24px,5.6vw,100px);
  padding-right:clamp(24px,5.6vw,100px);
  max-width:1700px;
  margin:auto
}

.eyebrow {
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.34em;
  color:#aaa7c4;
  font-weight:500;
  margin:0 0 18px;
  line-height:1.7
}

.site-header {
  height:108px;
  padding:0 clamp(24px,5.6vw,100px);
  position:absolute;
  left:0;
  top:0;
  width:100%;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  font-size:29px;
  font-weight:650;
  letter-spacing:-1.1px
}

.brand svg {
  width:48px;
  height:38px;
  flex-shrink:0
}

.site-header>nav {
  display:flex;
  gap:45px;
  align-items:center
}

.nav-link {
  font-size:15px;
  color:#c9c9db;
  position:relative;
  padding:18px 0;
  transition:color .2s
}

.nav-link:hover,.nav-link.active {
  color:white
}

.nav-link.active:after {
  content:"";
  position:absolute;
  bottom:4px;
  left:-10px;
  right:-10px;
  height:1px;
  background:linear-gradient(90deg,transparent,#b9a8ff,transparent);
  box-shadow:0 2px 12px #9584ff
}

.outline-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:1px solid #9194b1;
  border-radius:40px;
  padding:12px 24px;
  font-size:14px;
  line-height:1.4;
  transition:background .2s,border-color .2s
}

.outline-button:hover {
  background:#b3a0ff18;
  border-color:var(--accent)
}

.menu-toggle,.mobile-menu {
  display:none
}

.site-header > .mobile-menu {
  display:none
}

.hero {
  height:650px;
  min-height:590px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-bottom:1px solid var(--border)
}

.hero-art {
  position:absolute;
  inset:-20px;
  z-index:-3;
  background:url('assets/hero-space.png') center 49%/cover no-repeat;
  will-change:transform
}

.hero-shade {
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#050915 0%,#060a15e0 25%,#060a1535 68%,#060a1510),linear-gradient(0deg,#060a15 0%,transparent 30%,#03061150 100%)
}

.hero-inner {
  position:relative;
  height:100%;
  max-width:1700px;
  margin:auto;
  padding:170px clamp(24px,5.6vw,100px) 80px
}

.hero-copy {
  position:relative;
  z-index:2;
  max-width:770px
}

.hero h1 {
  margin:0 0 24px;
  font-size:clamp(52px,5.4vw,86px);
  font-weight:750;
  line-height:1.01;
  letter-spacing:-.058em
}

.hero h1 span {
  background:linear-gradient(110deg,#f3eaff 0%,#bbadfa 45%,#8973f2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.hero-description {
  font-size:19px;
  line-height:1.55;
  color:#c1c2d7;
  max-width:480px;
  margin:25px 0 28px;
  font-weight:400
}

.text-link {
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:18px;
  color:#ddd7fa
}

.link-line {
  display:inline-block;
  width:38px;
  height:1px;
  background:#a99bdd;
  transition:width .25s
}

.text-link:hover .link-line {
  width:65px
}

.hero-bottom {
  position:absolute;
  bottom:26px;
  left:clamp(24px,5.6vw,100px);
  right:clamp(24px,5.6vw,100px);
  display:flex;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:.06em;
  color:#9194ae
}

.hero-bottom span:last-child {
  display:flex;
  gap:14px;
  align-items:center
}

.hero-side-note {
  position:absolute;
  right:5.5%;
  top:42%;
  font-size:11px;
  line-height:2;
  letter-spacing:.29em;
  text-transform:uppercase;
  color:#9c99b9
}

.phone-wrap {
  position:absolute;
  left:61%;
  top:132px;
  transform:rotate(13deg);
  width:260px;
  animation:phone-enter 1.2s cubic-bezier(.2,.7,.2,1) both
}

.phone {
  height:540px;
  padding:8px;
  border-radius:43px;
  background:linear-gradient(130deg,#d6d5f9,#60667f 25%,#171b33 50%,#9294bf 85%,#d3c7f0);
  border:1px solid #b6bbe0;
  box-shadow:2px 0 0 2px #3a3c5b,12px 22px 70px #0009;
  position:relative
}

.phone:after {
  content:"";
  position:absolute;
  right:-4px;
  top:143px;
  height:71px;
  width:3px;
  border-radius:3px;
  background:#878bad
}

.phone-screen {
  height:100%;
  border:4px solid #02040a;
  border-radius:35px;
  overflow:hidden;
  position:relative;
  background:#171b35
}

.phone-screen>img {
  object-position:57% center
}

.phone-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#08091e88,transparent 55%,#02051890)
}

.phone-island {
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:95px;
  height:22px;
  background:#02040a;
  border-radius:0 0 15px 15px
}

.phone-status {
  position:absolute;
  top:12px;
  left:15px;
  right:14px;
  font-size:10px;
  display:flex;
  justify-content:space-between
}

.phone-brand {
  position:absolute;
  top:55px;
  left:18px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:15px;
  letter-spacing:-.5px
}

.phone-brand svg {
  width:30px;
  height:24px
}

.phone-message {
  position:absolute;
  top:51%;
  left:20px;
  right:15px;
  font-family:Georgia,serif;
  font-size:36px;
  line-height:1.14;
  letter-spacing:-1px;
  text-shadow:0 2px 20px #020413
}

.phone-message em {
  font-weight:normal
}

.phone-message small {
  display:block;
  font-family:inherit;
  font-size:9px;
  letter-spacing:.2em;
  margin-top:25px
}

.phone-home {
  position:absolute;
  bottom:7px;
  left:35%;
  width:30%;
  height:3px;
  border-radius:5px;
  background:white
}

.work {
  padding-top:50px;
  padding-bottom:62px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:29px
}

.section-heading .eyebrow {
  margin-bottom:9px
}

.section-heading h2 {
  font-size:clamp(26px,3vw,44px);
  line-height:1.18;
  font-weight:650;
  letter-spacing:-.046em;
  margin:0
}

.section-index {
  font-size:10px;
  letter-spacing:.2em;
  white-space:nowrap;
  color:#797e9b;
  margin-bottom:6px
}

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

.app-card {
  position:relative;
  display:block;
  text-align:left;
  min-width:0;
  width:100%;
  padding:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:19px;
  background:linear-gradient(150deg,#121a30,#0a0e1c 85%);
  transition:transform .35s,border-color .35s,box-shadow .35s;
  isolation:isolate
}

.app-card:hover {
  transform:translateY(-8px);
  border-color:#b3a0ff70;
  box-shadow:0 18px 40px #0005
}

.card-art {
  height:244px;
  position:relative;
  overflow:hidden;
  z-index:-1
}

.card-art img {
  transition:transform .7s cubic-bezier(.2,.6,.2,1)
}

.app-card:hover .card-art img {
  transform:scale(1.055)
}

.card-art:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#0b1021 0%,#0b102122 38%,transparent 75%)
}

.card-category {
  position:absolute;
  top:15px;
  left:15px;
  padding:5px 9px;
  border-radius:20px;
  background:#050a1560;
  backdrop-filter:blur(14px);
  color:#ffffffe0;
  font-size:10px;
  letter-spacing:.02em;
  z-index:1;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .2s,transform .2s
}

.app-card:hover .card-category,.app-card:focus-visible .card-category {
  opacity:1;
  transform:none
}

.wildstep img {
  object-position:34% center
}

.stayontrack img {
  object-position:50% 77%
}

.card-content {
  padding:0 19px 23px;
  margin-top:-43px
}

.app-icon {
  width:59px;
  height:59px;
  border-radius:15px;
  border:2px solid #f6f5fbba;
  box-shadow:0 3px 15px #0004;
  object-fit:cover;
  margin-bottom:15px;
  background:#102324
}

.drawn-icon {
  display:grid;
  place-items:center;
  font-size:42px;
  line-height:1
}

.travel-icon {
  color:#ffcb57;
  background:linear-gradient(150deg,#e8fffc,#f8fcff 57%,#46a9e6 58%,#298dde)
}

.card-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px
}

.card-title h3 {
  font-size:clamp(16px,1.6vw,23px);
  letter-spacing:-.04em;
  font-weight:600;
  margin:0;
  line-height:1.3
}

.card-plus {
  font-size:21px;
  font-weight:300;
  color:#b3a0ff;
  opacity:0;
  transition:opacity .2s
}

.app-card:hover .card-plus,.app-card:focus-visible .card-plus {
  opacity:1
}

.card-content>p {
  font-size:13px;
  line-height:1.5;
  color:#bfc0d4;
  margin:7px 0 0;
  letter-spacing:-.02em
}

.gallery-note {
  text-align:center;
  margin:31px 0 0;
  font-size:12px;
  color:#7e839e;
  line-height:1.6
}

.about {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:10%;
  border-top:1px solid var(--border);
  padding-top:96px;
  padding-bottom:99px
}

.about h2 {
  font-size:clamp(35px,4.6vw,64px);
  line-height:1.1;
  letter-spacing:-.055em;
  margin:0;
  font-weight:600
}

.about h2 span {
  color:#a9a0d0
}

.about-copy {
  padding-top:20px;
  max-width:510px
}

.about-copy p {
  font-size:17px;
  line-height:1.75;
  color:#b3b7cd;
  margin:0 0 20px
}

.about-copy .text-link {
  margin-top:10px
}

.approach {
  padding-top:58px;
  padding-bottom:84px;
  border-top:1px solid var(--border)
}

.principles {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:44px
}

.principles article>span {
  font-size:12px;
  color:#a898d8;
  letter-spacing:.12em
}

.principles h3 {
  font-size:21px;
  letter-spacing:-.04em;
  font-weight:500;
  margin:20px 0 12px
}

.principles p {
  font-size:14px;
  line-height:1.8;
  color:#8f95ae;
  max-width:345px;
  margin:0
}

footer {
  border-top:1px solid var(--border);
  padding-top:45px;
  padding-bottom:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:24px
}

footer .brand {
  font-size:24px
}

footer .brand svg {
  width:38px
}

footer>span,footer>a:last-of-type {
  font-size:13px;
  color:#9295ad
}

footer p {
  width:100%;
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#626a85;
  margin:10px 0 0
}

dialog {
  width:min(870px,calc(100% - 40px));
  padding:0;
  color:var(--text);
  border:1px solid #8f83bf55;
  border-radius:24px;
  background:#0d1223;
  max-height:calc(100dvh - 48px);
  overflow:auto;
  box-shadow:0 30px 150px #000b
}

dialog[open] {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  animation:dialog-enter .25s ease
}

dialog::backdrop {
  background:#020512c9;
  backdrop-filter:blur(10px)
}

.dialog-close {
  position:absolute;
  right:15px;
  top:15px;
  z-index:1;
  border:1px solid #ffffff30;
  background:#070b18b0;
  border-radius:50%;
  width:40px;
  height:40px;
  font-size:25px;
  line-height:1
}

.dialog-art {
  min-height:470px
}

.dialog-art img {
  object-position:center
}

.dialog-content {
  padding:62px 35px 35px
}

.dialog-content .eyebrow {
  font-size:10px;
  letter-spacing:.22em
}

.dialog-content h2 {
  font-size:37px;
  line-height:1.1;
  margin:0 0 13px;
  letter-spacing:-.05em
}

.dialog-tagline {
  font-size:19px;
  color:#c1b2ff!important
}

.dialog-content>p:not(.eyebrow) {
  color:#adb3ca;
  line-height:1.65;
  font-size:15px
}

.dialog-content ul {
  list-style:none;
  padding:0;
  margin:26px 0
}

.dialog-content li {
  border-top:1px solid var(--border);
  padding:10px 0;
  font-size:13px;
  color:#c8cbe0
}

.dialog-bottom {
  border-top:1px solid var(--border);
  padding-top:23px;
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between
}

.dialog-bottom span {
  font-size:11px;
  line-height:1.6;
  color:#7e859d
}

.dialog-bottom .outline-button {
  white-space:nowrap;
  padding:10px 18px;
  font-size:12px
}

.dialog-actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}

.primary-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border:1px solid var(--accent);
  border-radius:40px;
  padding:10px 24px;
  background:var(--accent);
  color:#101329;
  font-size:14px;
  font-weight:600;
  transition:background .2s
}

.primary-button:hover {
  background:#c6b8ff
}

.product-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:30px;
  padding-bottom:30px
}

.product-main {
  padding-top:48px;
  padding-bottom:70px
}

.product-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:8%
}

.product-copy .app-icon {
  width:76px;
  height:76px;
  margin-bottom:30px
}

.product-copy h1 {
  font-size:clamp(44px,5.5vw,82px);
  line-height:1.07;
  letter-spacing:-.055em;
  margin:0 0 22px
}

.product-tagline {
  color:var(--accent);
  font-size:23px;
  line-height:1.4;
  margin:0 0 20px
}

.product-description {
  color:var(--muted);
  font-size:17px;
  line-height:1.75;
  max-width:520px
}

.product-features {
  list-style:none;
  padding:0;
  margin:30px 0 0
}

.product-features li {
  border-top:1px solid var(--border);
  padding:14px 0;
  font-size:15px;
  color:#c8cbe0
}

.product-art {
  height:580px;
  border-radius:22px;
  object-fit:cover;
  object-position:center
}

.other-apps {
  border-top:1px solid var(--border);
  margin-top:80px;
  padding-top:35px
}

.other-apps nav {
  display:flex;
  gap:18px 35px;
  flex-wrap:wrap;
  font-size:17px
}

.other-apps a:hover {
  color:var(--accent)
}

@media(max-width:700px) {
  .product-header .brand {
    font-size:24px;
    gap:8px
  }
  .product-header .outline-button {
    font-size:13px;
    padding:10px 16px
  }
  .product-main {
    padding-top:25px;
    padding-bottom:45px
  }
  .product-intro {
    grid-template-columns:1fr;
    gap:35px
  }
  .product-art {
    height:340px
  }
  .other-apps {
    margin-top:45px
  }
}

.hero-enter {
  animation:hero-enter .85s cubic-bezier(.2,.6,.2,1) both
}

.hero-enter:nth-child(2) {
  animation-delay:.1s
}

.hero-enter:nth-child(3) {
  animation-delay:.2s
}

.hero-enter:nth-child(4) {
  animation-delay:.3s
}

.motion-ready .reveal {
  opacity:0;
  transform:translateY(22px);
  transition:opacity .65s,transform .65s
}

.motion-ready .reveal.visible {
  opacity:1;
  transform:none
}

.app-card:nth-child(2) {
  transition-delay:40ms
}

.app-card:nth-child(3) {
  transition-delay:80ms
}

.app-card:nth-child(4) {
  transition-delay:120ms
}

.app-card:nth-child(5) {
  transition-delay:160ms
}

@keyframes hero-enter {
  from {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:none
  }
}

@keyframes phone-enter {
  from {
    opacity:0;
    translate:0 65px;
    rotate:5deg
  }
  to {
    opacity:1;
    translate:0 0;
    rotate:0deg
  }
}

@keyframes dialog-enter {
  from {
    opacity:0;
    transform:translateY(12px) scale(.98)
  }
  to {
    opacity:1;
    transform:none
  }
}

@media(min-width:1600px) {
  .phone-wrap {
    left:62%;
    width:280px
  }
  .phone {
    height:570px
  }
  .hero {
    height:705px
  }
  .hero-inner {
    padding-top:185px
  }
  .hero-side-note {
    right:6%
  }
  .card-art {
    height:280px
  }
}

@media(max-width:1150px) {
  .site-header>nav {
    gap:26px
  }
  .hero {
    height:610px
  }
  .hero-inner {
    padding-top:164px
  }
  .hero-copy {
    max-width:640px
  }
  .hero h1 {
    font-size:61px
  }
  .phone-wrap {
    left:68%;
    width:225px;
    top:140px
  }
  .phone {
    height:480px
  }
  .hero-side-note {
    display:none
  }
  .hero-description {
    font-size:17px
  }
  .app-grid {
    gap:12px
  }
  .card-content {
    padding-left:13px;
    padding-right:13px
  }
  .card-art {
    height:208px
  }
  .card-content>p {
    font-size:12px
  }
  .card-title h3 {
    font-size:17px
  }
  .section-index {
    display:none
  }
}

@media(max-width:900px) {
  .brand {
    font-size:25px
  }
  .site-header {
    height:94px
  }
  .site-header>nav {
    gap:22px
  }
  .header-cta {
    display:none
  }
  .hero-inner {
    padding-top:150px
  }
  .hero h1 {
    font-size:clamp(42px,6.8vw,56px)
  }
  .hero-copy {
    max-width:590px
  }
  .phone-wrap {
    left:70%;
    top:200px;
    opacity:.65;
    width:205px
  }
  .phone {
    height:440px
  }
  .hero-description {
    max-width:380px
  }
  .app-grid {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px
  }
  .card-art {
    height:250px
  }
  .card-content {
    padding-left:19px;
    padding-right:19px
  }
  .card-title h3 {
    font-size:22px
  }
  .card-content>p {
    font-size:14px
  }
  .about {
    gap:7%;
    padding-top:70px;
    padding-bottom:70px
  }
  .about-copy p {
    font-size:16px
  }
  .principles {
    gap:25px
  }
  .section-heading h2 {
    font-size:34px
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:20px
  }
  .site-header {
    height:86px;
    gap:15px
  }
  .site-header .brand {
    font-size:26px;
    gap:8px
  }
  .brand svg {
    width:42px
  }
  .site-header>nav:not(.mobile-menu) {
    display:none
  }
  .menu-toggle {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    width:44px;
    height:44px;
    background:none;
    border:1px solid #b9b2d04d;
    border-radius:50%
  }
  .menu-toggle span {
    width:17px;
    height:1px;
    background:white;
    transition:transform .2s
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(3.5px) rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-3.5px) rotate(-45deg)
  }
  .site-header .mobile-menu:not([hidden]) {
    display:flex;
    position:absolute;
    top:77px;
    right:24px;
    left:24px;
    flex-direction:column;
    gap:0;
    align-items:stretch;
    padding:10px 20px;
    border:1px solid var(--border);
    background:#0d1328f5;
    backdrop-filter:blur(20px);
    border-radius:15px
  }
  .mobile-menu a {
    padding:15px 5px;
    font-size:15px
  }
  .hero {
    height:745px;
    min-height:0
  }
  .hero-inner {
    padding-top:129px
  }
  .hero-art {
    background-position:67% center
  }
  .hero-shade {
    background:linear-gradient(0deg,#060a15 0%,#060a1520 35%,#060a15e0 80%),linear-gradient(90deg,#060a1540,transparent)
  }
  .hero .eyebrow {
    font-size:10px;
    letter-spacing:.25em;
    margin-bottom:18px
  }
  .hero h1 {
    font-size:clamp(40px,10.6vw,62px);
    line-height:1.08;
    letter-spacing:-.055em
  }
  .hero-description {
    font-size:16px;
    line-height:1.6;
    margin-top:20px;
    max-width:340px
  }
  .hero .text-link {
    font-size:13px
  }
  .desktop-break {
    display:none
  }
  .phone-wrap {
    left:auto;
    right:14%;
    top:470px;
    width:156px;
    opacity:1;
    transform:rotate(12deg)
  }
  .phone {
    height:325px;
    border-radius:28px;
    padding:5px
  }
  .phone-screen {
    border-radius:23px;
    border-width:3px
  }
  .phone-island {
    width:60px;
    height:15px
  }
  .phone-status {
    font-size:6px;
    top:7px;
    left:9px;
    right:9px
  }
  .phone-brand {
    top:35px;
    left:11px;
    font-size:10px;
    gap:3px
  }
  .phone-brand svg {
    width:20px;
    height:17px
  }
  .phone-message {
    left:12px;
    top:51%;
    font-size:23px;
    letter-spacing:-.5px
  }
  .phone-message small {
    font-size:6px;
    letter-spacing:.15em;
    margin-top:15px
  }
  .phone:after {
    top:80px;
    height:43px;
    right:-3px
  }
  .hero-bottom {
    display:none;
    bottom:23px;
    font-size:9px;
    right:24px;
    left:24px
  }
  .hero-bottom>span:first-child {
    max-width:130px;
    line-height:1.6
  }
  .hero-bottom>span:last-child {
    gap:7px
  }
  .work {
    padding-top:38px;
    padding-bottom:45px
  }
  .section-heading {
    margin-bottom:23px
  }
  .section-heading h2 {
    font-size:30px;
    max-width:360px;
    line-height:1.2
  }
  .section-heading .eyebrow {
    font-size:10px;
    letter-spacing:.27em
  }
  .app-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
  }
  .app-card {
    border-radius:16px
  }
  .card-art {
    height:198px
  }
  .card-content {
    padding:0 13px 20px;
    margin-top:-36px
  }
  .app-icon {
    width:48px;
    height:48px;
    border-radius:12px;
    margin-bottom:12px
  }
  .card-title h3 {
    font-size:19px
  }
  .card-plus {
    opacity:1;
    font-size:17px
  }
  .card-content>p {
    font-size:12px;
    line-height:1.5;
    min-height:36px
  }
  .drawn-icon {
    font-size:33px
  }
  .app-card:last-child {
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .app-card:last-child .card-art {
    height:210px
  }
  .app-card:last-child .card-content {
    margin-top:0;
    align-self:center;
    padding:20px
  }
  .app-card:last-child .card-art:after {
    background:linear-gradient(90deg,transparent,#0b1021)
  }
  .app-card:last-child .card-content>p {
    min-height:0
  }
  .gallery-note {
    margin-top:26px;
    max-width:290px;
    margin-left:auto;
    margin-right:auto;
    font-size:12px
  }
  .card-category {
    display:none
  }
  .about {
    grid-template-columns:1fr;
    gap:26px;
    padding-top:52px;
    padding-bottom:55px
  }
  .about h2 {
    font-size:44px
  }
  .about-copy {
    padding:0
  }
  .about-copy p {
    font-size:16px
  }
  .approach {
    padding-top:45px;
    padding-bottom:50px
  }
  .principles {
    grid-template-columns:1fr;
    gap:28px;
    margin-top:34px
  }
  .principles article {
    position:relative;
    padding-left:40px
  }
  .principles article>span {
    position:absolute;
    left:0;
    top:4px
  }
  .principles h3 {
    margin:0 0 10px;
    font-size:22px
  }
  .principles p {
    max-width:none;
    font-size:15px
  }
  .approach h2 {
    font-size:32px
  }
  footer {
    gap:20px;
    padding-top:33px
  }
  footer>.brand {
    width:100%
  }
  footer>span,footer>a:last-of-type {
    font-size:12px
  }
  footer p {
    margin-top:12px
  }
  dialog {
    width:calc(100% - 28px);
    max-height:calc(100dvh - 28px);
    border-radius:18px
  }
  dialog[open] {
    grid-template-columns:1fr
  }
  .dialog-art {
    min-height:0;
    height:210px
  }
  .dialog-art img {
    object-position:center 65%
  }
  .dialog-content {
    padding:25px
  }
  .dialog-content h2 {
    font-size:34px
  }
  .dialog-close {
    top:12px;
    right:12px
  }
  .dialog-bottom {
    gap:10px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    will-change:auto!important
  }
  .motion-ready .reveal {
    opacity:1;
    transform:none
  }
  .app-card:hover {
    transform:none
  }
  .hero-art {
    transform:none!important
  }
}