@font-face {
  font-family:Inter;
  src:url('./assets/inter-latin-variable.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}

:root {
  --paper:#faf9f6;
  --ink:#26262b;
  --muted:#72717a;
  --purple:#6c58d4;
  --line:#e8e6e2;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

* {
  box-sizing:border-box;
}

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

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

button,input {
  font:inherit;
}

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

button {
  cursor:pointer;
}

button,a {
  -webkit-touch-callout:none;
}

button {
  border:0;
}

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

h1,h2,h3,h4,p {
  margin:0;
}

p {
  line-height:1.8;
}

button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid #8874e1;
  outline-offset:6px;
}

svg {
  flex-shrink:0;
}

img {
  display:block;
}

::selection {
  background:#e6ddff;
  color:#3e2f84;
}

[hidden] {
  display:none!important;
}

.container {
  width:min(1180px,calc(100% - 96px));
  margin-inline:auto;
}

.section {
  padding-block:108px;
}

.icon {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

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

.skip-link {
  position:fixed;
  top:-70px;
  left:20px;
  z-index:100;
  background:var(--ink);
  color:white;
  padding:14px 20px;
  border-radius:8px;
}

.skip-link:focus {
  top:16px;
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  font-weight:650;
  line-height:1.5;
  letter-spacing:1.7px;
  color:#7b748c;
}

.muted {
  color:#96939d;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  padding:16px 22px;
  min-height:51px;
  border-radius:9px;
  font-size:12px;
  font-weight:550;
  transition:transform .2s,background .2s,box-shadow .2s;
}

.button:hover {
  transform:translateY(-2px);
}

.button-dark {
  color:#fff;
  background:#2d2b35;
  box-shadow:0 4px 7px #25233410;
}

.button-dark:hover {
  background:#4d416e;
  box-shadow:0 6px 20px #4a357d25;
}

.button .icon {
  width:17px;
  height:17px;
}

.button-small {
  padding:11px 15px;
  min-height:39px;
  background:#efedf6;
  border:1px solid #e4dfef;
  font-size:11px;
  gap:17px;
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:550;
  background:transparent;
  padding:0;
  color:inherit;
}

.text-link .icon {
  width:16px;
  height:16px;
  transition:transform .2s;
}

.text-link:hover .icon {
  transform:translate(2px,-2px);
}

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

.brand {
  display:inline-flex;
  align-items:center;
  font-size:23px;
  letter-spacing:-1px;
  font-weight:720;
}

.brand img {
  margin-right:9px;
}

.brand-period {
  color:#8370da;
  margin-left:1px;
}

.site-header {
  position:sticky;
  top:0;
  z-index:30;
  background:#faf9f6e8;
  backdrop-filter:blur(20px);
  border-bottom:1px solid #e8e6e287;
}

.nav-row {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.main-nav {
  display:flex;
  align-items:center;
  gap:32px;
}

.main-nav a {
  font-size:11px;
  color:#65626d;
  transition:color .2s;
}

.main-nav a:hover {
  color:var(--purple);
}

.menu-toggle {
  display:none;
  background:transparent;
  width:42px;
  height:42px;
  padding:10px;
}

.menu-toggle span {
  display:block;
  height:1.5px;
  background:var(--ink);
  margin:6px 0;
  transition:transform .2s;
}

.hero {
  display:grid;
  grid-template-columns:1fr 1.04fr;
  align-items:center;
  gap:40px;
  min-height:690px;
  padding-block:68px 75px;
}

.hero-copy {
  position:relative;
  z-index:2;
  padding-bottom:15px;
}

.hero-copy .eyebrow {
  font-size:9px;
  letter-spacing:1.65px;
}

.tiny-star {
  font-size:19px;
  color:#7d65d7;
  margin-right:3px;
}

.hero h1 {
  font-size:clamp(70px,7.4vw,104px);
  font-weight:570;
  letter-spacing:-7px;
  line-height:1.04;
  margin-top:24px;
}

.shining-word {
  position:relative;
  color:#7860cf;
  display:inline-block;
}

.shining-word svg {
  position:absolute;
  bottom:-10px;
  left:-2px;
  width:100%;
  height:18px;
  fill:none;
  stroke:#baa7e9;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-dasharray:340;
  stroke-dashoffset:340;
  animation:underline-in 1s .45s forwards;
}

.title-period {
  color:#7860cf;
}

.hero-description {
  font-size:14px;
  line-height:1.9;
  color:#77737e;
  margin-top:36px;
}

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

.hero-note {
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:27px;
  color:#8a8591;
  font-size:10px;
}

.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#9985ca;
}

.hero-showcase {
  height:530px;
  position:relative;
  isolation:isolate;
}

.showcase-ambient {
  position:absolute;
  inset:25px -25px 5px;
  border-radius:50%;
  background:radial-gradient(ellipse at 48% 42%,#eee4fb 0%,#f6f0f9 35%,transparent 70%);
  z-index:-2;
  transition:background 1s;
}

.hero-showcase[data-current="mactidy"] .showcase-ambient {
  background:radial-gradient(ellipse at 48% 42%,#e6edce,transparent 70%);
}

.hero-showcase[data-current="mdlumen"] .showcase-ambient {
  background:radial-gradient(ellipse at 48% 42%,#f6e4ca,transparent 70%);
}

.hero-showcase[data-current="cartprevo"] .showcase-ambient {
  background:radial-gradient(ellipse at 48% 42%,#d8eeeb,transparent 70%);
}

.orbit {
  position:absolute;
  width:465px;
  height:365px;
  border:1px solid #e7e0ed;
  left:50%;
  top:70px;
  transform:translateX(-50%) rotate(-24deg);
  border-radius:50%;
  z-index:-1;
}

.orbit-two {
  width:400px;
  height:485px;
  top:6px;
  transform:translateX(-50%) rotate(34deg);
  border-style:dashed;
  border-color:#e8e2ec;
}

.orbit-spark {
  position:absolute;
  color:#b4a0d7;
  font-weight:300;
}

.spark-one {
  right:93px;
  top:14px;
  font-size:28px;
  animation:twinkle 5s infinite;
}

.spark-two {
  left:3px;
  top:220px;
  font-size:27px;
  animation:twinkle 6s 1s infinite;
}

.spark-three {
  right:10px;
  bottom:180px;
  font-size:25px;
  color:#cab8a8;
}

.floating-app {
  position:absolute;
  z-index:3;
  background:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  animation:float 6s ease-in-out infinite;
  padding:7px;
  border-radius:20px;
  transition:transform .2s;
}

.floating-app img {
  width:58px;
  height:58px;
  border-radius:17px;
  box-shadow:0 9px 20px #2d203c20;
  transition:box-shadow .3s,transform .3s;
}

.floating-app span {
  font-size:10px;
  color:#77717f;
  font-weight:550;
  letter-spacing:-.2px;
}

.floating-app:hover img,.floating-app[aria-pressed="true"] img {
  transform:translateY(-3px);
  box-shadow:0 0 0 4px #faf9f6,0 0 0 5px #c9b7ef,0 12px 22px #49335d20;
}

.floating-lidplay {
  left:47px;
  top:0;
  transform:rotate(-9deg);
  animation-delay:-2s;
}

.floating-mactidy {
  right:-8px;
  top:60px;
  animation-delay:-4s;
}

.floating-mdlumen {
  left:12px;
  bottom:28px;
  animation-delay:-1s;
}

.floating-cartprevo {
  right:20px;
  bottom:4px;
  animation-delay:-3s;
}

.spotlight-window {
  position:absolute;
  top:113px;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  width:390px;
  background:#fff;
  border:1px solid #e6e0ea;
  border-radius:13px;
  box-shadow:0 25px 60px -20px #5f43782b,0 4px 10px #32223808;
  overflow:hidden;
  transition:transform .4s;
}

.hero-showcase:hover .spotlight-window {
  transform:translateX(-50%) rotate(-1deg);
}

.window-top {
  height:34px;
  display:flex;
  align-items:center;
  padding:0 13px;
  gap:13px;
  border-bottom:1px solid #eeeaf0;
  color:#9b92a5;
  background:#ffffffc7;
}

.window-top>span {
  font-size:7px;
  letter-spacing:1.2px;
  margin:auto;
}

.window-top>.icon {
  width:12px;
  height:12px;
}

.window-dots {
  display:inline-flex;
  gap:4px;
}

.window-dots i {
  display:block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#dcd6e1;
}

.window-dots i:first-child {
  background:#e9b1b0;
}

.window-dots i:nth-child(2) {
  background:#ecd79f;
}

.window-dots i:nth-child(3) {
  background:#b4d1b1;
}

.spotlight-scene {
  height:238px;
  background:#f8f5fc;
  position:relative;
  padding-top:22px;
  animation:scene-in .55s ease-out;
}

.scene-label {
  font-size:7px;
  letter-spacing:1.65px;
  color:#8c7f9b;
  text-align:center;
}

.laptop {
  width:270px;
  margin:20px auto 0;
  perspective:650px;
}

.laptop-display {
  height:136px;
  border:5px solid #34313e;
  border-bottom-width:7px;
  border-radius:8px 8px 2px 2px;
  transform-origin:bottom;
  animation:laptop-open 7s ease-in-out infinite;
  background:#a595bd;
  box-shadow:0 8px 20px #342e4730;
}

.laptop-wallpaper {
  height:100%;
  background:linear-gradient(145deg,#ec9e7d,#cd8caf 45%,#8b78ce);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}

.wallpaper-ring {
  position:absolute;
  border-radius:50%;
  width:250px;
  height:250px;
  border:40px solid #f8c9ae77;
  transform:rotate(-20deg);
  top:-100px;
  left:-100px;
}

.ring-b {
  top:55px;
  left:140px;
  border-color:#5549a63d;
}

.wallpaper-play {
  font-size:43px;
  color:#fff9f1;
  line-height:1.2;
  z-index:1;
}

.wallpaper-time {
  color:white;
  font-size:9px;
  font-weight:500;
  z-index:1;
  letter-spacing:.2px;
  margin-top:6px;
}

.laptop-base {
  height:8px;
  width:300px;
  margin-left:-15px;
  border-radius:1px 1px 70% 70%;
  background:linear-gradient(#e1dee6,#aca6b5);
  position:relative;
}

.laptop-base span {
  position:absolute;
  left:43%;
  top:0;
  width:15%;
  height:3px;
  background:#908998;
  border-radius:0 0 8px 8px;
}

.scene-caption {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  position:absolute;
  bottom:13px;
  width:100%;
  font-size:8px;
  color:#8d7f9b;
}

.mini-dot {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#baa3d8;
}

.spotlight-bottom {
  height:49px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 17px;
  border-top:1px solid #eeeaf0;
}

.spotlight-bottom>div {
  display:flex;
  align-items:center;
  gap:14px;
}

.spotlight-bottom strong {
  font-size:11px;
  font-weight:600;
}

.spotlight-bottom>div>span {
  font-size:7px;
  letter-spacing:.5px;
  color:#a69caa;
}

.concept-label {
  font-size:7px;
  color:#938898;
  padding:4px 6px;
  background:#f6f3f8;
  border-radius:4px;
}

.showcase-controls {
  position:absolute;
  bottom:27px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:17px;
  align-items:center;
}

.showcase-dots {
  display:flex;
  gap:4px;
}

.showcase-dots button {
  width:22px;
  height:26px;
  background:transparent;
  position:relative;
}

.showcase-dots button::after {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d6cce0;
  top:11px;
  left:8px;
  transition:width .2s,background .2s;
}

.showcase-dots button[aria-pressed="true"]::after {
  background:#8b73b4;
  width:17px;
  left:2px;
  border-radius:6px;
}

.motion-control {
  background:#f1ecf5;
  border:1px solid #e3dbea;
  color:#8a7899;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:12px;
  display:grid;
  place-items:center;
}

.hero-showcase.is-paused * {
  animation-play-state:paused!important;
}

#scene-mactidy {
  background:#f6f9ed;
}

.tidy-scene {
  margin:22px 28px;
  display:flex;
  align-items:center;
  gap:27px;
}

.tidy-ring {
  width:130px;
  height:130px;
  border:10px solid #dce9c2;
  border-top-color:#a2bf74;
  border-right-color:#b6d18d;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  animation:ring-in 1.5s ease;
}

.tidy-ring>.icon {
  width:17px;
  height:17px;
  color:#839e58;
  margin-bottom:5px;
}

.tidy-ring strong {
  font-size:23px;
  font-weight:550;
  letter-spacing:-1px;
}

.tidy-ring small {
  font-size:10px;
  letter-spacing:0;
}

.tidy-ring>span {
  font-size:5px;
  color:#8b957c;
  margin-top:5px;
}

.tidy-bars {
  flex:1;
  display:grid;
  gap:13px;
}

.tidy-bars span {
  font-size:8px;
  color:#7e8a6c;
}

.tidy-bars i {
  display:block;
  height:5px;
  background:#bbcda3;
  border-radius:4px;
  margin-top:5px;
  width:95%;
  transform-origin:left;
  animation:bar-in .8s ease-out both;
}

.tidy-bars span:nth-child(2) i {
  width:70%;
  background:#d7cce6;
  animation-delay:.15s;
}

.tidy-bars span:nth-child(3) i {
  width:45%;
  background:#e8c8a8;
  animation-delay:.3s;
}

#scene-mactidy .scene-label,#scene-mactidy .scene-caption {
  color:#7d8c68;
}

#scene-mdlumen {
  background:#fcf7ed;
}

.markdown-scene {
  display:grid;
  grid-template-columns:94px 1fr;
  margin:17px 28px;
  border:1px solid #e7dece;
  border-radius:7px;
  height:154px;
  overflow:hidden;
  background:white;
  box-shadow:0 6px 15px #8e733710;
}

.markdown-scene aside {
  background:#f4f0e8;
  padding:13px 8px;
  display:flex;
  flex-direction:column;
  gap:13px;
}

.markdown-scene aside>span:first-child {
  font-size:6px;
  letter-spacing:1px;
}

.markdown-scene aside span,.markdown-scene aside b {
  font-size:7px;
  font-weight:400;
  color:#9a8d74;
}

.markdown-scene aside b {
  background:#e8e0d1;
  color:#79613a;
  padding:6px;
  margin:-4px;
  border-radius:3px;
}

.markdown-scene>div {
  padding:12px 15px;
}

.document-tag {
  font-size:6px;
  color:#b19f83;
}

.markdown-scene h3 {
  font-size:20px;
  letter-spacing:-.7px;
  line-height:1.2;
  margin-top:7px;
  color:#62523c;
}

.markdown-scene p {
  font-size:5px;
  margin-top:6px;
  color:#96846c;
}

.document-line {
  height:3px;
  background:#eee7dc;
  border-radius:2px;
  margin-top:7px;
}

.document-line.short {
  width:65%;
  margin-top:4px;
}

.doc-check {
  font-size:5px;
  color:#a08d6b;
  margin-top:8px;
  display:block;
}

#scene-cartprevo {
  background:#eef8f7;
}

.import-scene {
  margin:19px 26px;
}

.import-file {
  display:flex;
  align-items:center;
  gap:9px;
}

.import-file>.icon {
  width:26px;
  height:26px;
  color:#71a69e;
}

.import-file>span {
  font-size:9px;
  color:#4e7c76;
  font-weight:550;
}

.import-file small {
  display:block;
  font-size:6px;
  color:#8aaba6;
  margin-top:3px;
  font-weight:400;
}

.file-format {
  margin-left:auto;
  font-size:6px!important;
  border:1px solid #c1dcd7;
  padding:4px 5px;
  border-radius:3px;
}

.import-table {
  display:grid;
  grid-template-columns:1.25fr .8fr 1fr;
  row-gap:0;
  margin-top:15px;
  background:white;
  border:1px solid #d7e9e5;
  border-radius:5px;
  overflow:hidden;
}

.import-table>* {
  font-size:7px;
  padding:7px 9px;
  border-bottom:1px solid #edf4f1;
  font-weight:450;
  white-space:nowrap;
}

.import-table>span {
  font-size:6px;
  background:#e6f1ee;
  color:#8aaba3;
}

.import-table>em {
  font-style:normal;
  color:#5b8d7b;
  font-size:6px;
}

.import-table .warning {
  color:#ad7f30;
  background:#fff9e9;
}

.import-result {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:6px;
  color:#7b9e96;
  margin-top:10px;
}

.import-result .icon {
  width:10px;
  height:10px;
}

.collection-strip {
  border-block:1px solid var(--line);
  background:#f5f4f0;
}

.collection-strip>.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  min-height:88px;
}

.collection-strip>.container>span {
  font-size:8px;
  font-weight:600;
  letter-spacing:1.6px;
  color:#96909b;
  max-width:160px;
  line-height:1.7;
}

.collection-strip a {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:550;
  color:#6a6572;
  transition:color .2s;
}

.collection-strip a:hover {
  color:#6f55ba;
}

.collection-strip img {
  border-radius:7px;
  filter:saturate(.75);
}

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

h2 {
  font-size:clamp(31px,3.3vw,44px);
  font-weight:530;
  letter-spacing:-1.9px;
  line-height:1.2;
}

.section-heading h2 {
  margin-top:16px;
}

.section-heading>p {
  font-size:12px;
  color:#89828d;
  max-width:290px;
  padding-bottom:3px;
}

.app-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

.app-card {
  border:1px solid #e5e1e6;
  border-radius:17px;
  overflow:hidden;
  background:#fff;
  scroll-margin-top:110px;
  transition:box-shadow .3s,transform .3s,border-color .3s;
}

.app-card:hover {
  box-shadow:0 20px 40px -20px #34213e30;
  transform:translateY(-4px);
  border-color:#cdc0de;
}

.card-art {
  height:288px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.art-overline {
  position:absolute;
  left:27px;
  top:23px;
  font-size:7px;
  letter-spacing:1.55px;
  font-weight:600;
  z-index:2;
}

.art-note {
  position:absolute;
  bottom:19px;
  font-size:8px;
  opacity:.6;
  left:0;
  width:100%;
  text-align:center;
  z-index:2;
}

.lidplay-art {
  background:#f0e8f6;
  color:#8e6c9d;
  background-image:radial-gradient(ellipse at 70% 45%,#f5d9d6,transparent 70%);
}

.card-laptop {
  width:270px;
  position:relative;
  transform:rotate(-6deg) translateY(7px);
  transition:transform .5s;
}

.app-card:hover .card-laptop {
  transform:rotate(-3deg) translateY(2px);
}

.card-laptop-screen {
  height:160px;
  border:5px solid #3c3546;
  border-radius:9px 9px 2px 2px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(145deg,#c6b2e0,#d58dae 55%,#eead87);
  box-shadow:0 12px 30px #8c628230;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.card-laptop-screen>span:last-child {
  font-size:53px;
  letter-spacing:-3px;
  font-weight:450;
  z-index:1;
}

.screen-orb {
  width:280px;
  height:280px;
  position:absolute;
  border:48px solid #ffe1c84d;
  border-radius:50%;
  top:-70px;
  left:-110px;
  animation:orb-drift 12s ease-in-out infinite;
}

.card-laptop-base {
  height:9px;
  width:302px;
  margin-left:-16px;
  border-radius:0 0 65% 65%;
  background:linear-gradient(#d8d3df,#a9a0b4);
}

.sound-waves {
  position:absolute;
  right:42px;
  bottom:72px;
  display:flex;
  align-items:center;
  gap:3px;
  padding:10px 12px;
  background:#ffffffab;
  border:1px solid #fff9;
  border-radius:9px;
  box-shadow:0 4px 15px #7e517d0a;
}

.sound-waves i {
  height:6px;
  width:3px;
  border-radius:5px;
  background:#b68fb8;
  animation:sound-wave 1.8s ease-in-out infinite;
}

.sound-waves i:nth-child(2n) {
  height:18px;
  animation-delay:-.4s;
}

.sound-waves i:nth-child(3n) {
  height:25px;
  animation-delay:-.9s;
}

.mactidy-art {
  background:#edf1e3;
  color:#7e8c61;
}

.tidy-preview {
  background:#fbfcf7;
  border:1px solid #dce3cd;
  border-radius:9px;
  width:342px;
  box-shadow:0 18px 35px -15px #72834836;
  transform:rotate(3deg) translateY(6px);
  transition:transform .5s;
  overflow:hidden;
}

.app-card:hover .tidy-preview {
  transform:rotate(0) translateY(2px);
}

.mini-window-bar {
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom:1px solid #e6e9dc;
  padding:11px 13px;
  font-size:7px;
  color:#9aa18c;
  background:#ffffff70;
}

.mini-window-bar>.window-dots {
  margin-right:auto;
}

.mini-window-bar>span:last-child {
  margin-right:auto;
}

.tidy-preview-content {
  padding:28px 21px;
  display:flex;
  align-items:center;
  gap:25px;
}

.folder-stack {
  position:relative;
  width:77px;
  height:76px;
  flex-shrink:0;
}

.folder-stack>span {
  position:absolute;
  width:57px;
  height:57px;
  border-radius:12px;
  display:grid;
  place-items:center;
  box-shadow:0 4px 8px #7b8c5d12;
  border:1px solid #e5ebd6;
  background:#e4edcc;
  transform:rotate(-14deg);
  left:0;
  top:5px;
}

.folder-stack>span:nth-child(2) {
  transform:rotate(13deg);
  left:22px;
  top:8px;
  background:#d9e6f2;
  border-color:#d4e0e9;
}

.folder-stack>span:nth-child(3) {
  transform:rotate(-3deg);
  left:13px;
  top:19px;
  background:#e7dff1;
  border-color:#e0d5ec;
  color:#a38eb6;
}

.folder-stack .icon {
  width:29px;
  height:29px;
}

.tidy-preview-content>div:last-child {
  flex:1;
}

.tidy-preview-content strong {
  display:block;
  color:#64744b;
  font-weight:550;
  font-size:18px;
  letter-spacing:-.5px;
}

.tidy-preview-content>div>span {
  display:block;
  font-size:6px;
  margin-top:6px;
  color:#9ba38b;
}

.storage-pills {
  display:flex;
  gap:3px;
  height:11px;
  margin-block:13px 7px;
}

.storage-pills i {
  width:45%;
  border-radius:3px;
  background:#baca9e;
}

.storage-pills i:nth-child(2) {
  background:#d9ccea;
  width:25%;
}

.storage-pills i:nth-child(3) {
  background:#e4c9aa;
  width:17%;
}

.storage-pills i:nth-child(4) {
  background:#e2e8d7;
  width:13%;
}

.tidy-preview-content small {
  font-size:5px;
  letter-spacing:.4px;
  color:#9ba38b;
}

.mdlumen-art {
  background:#f2ede4;
  color:#978264;
  background-image:radial-gradient(ellipse at 70% 65%,#ffe4b82f,transparent 70%);
}

.md-preview {
  width:390px;
  border:1px solid #e4daca;
  border-radius:8px;
  background:#fffcf8;
  transform:rotate(-3deg) translateY(8px);
  box-shadow:0 15px 40px -15px #9b815a30;
  overflow:hidden;
  transition:transform .5s;
}

.app-card:hover .md-preview {
  transform:rotate(-1deg) translateY(2px);
}

.md-preview .mini-window-bar {
  border-color:#ece2d4;
  color:#ac9c85;
}

.md-columns {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:160px;
}

.md-columns>div:first-child {
  padding:23px 15px;
  background:#f6f0e6;
  border-right:1px solid #e9dfd0;
  font-size:7px;
  line-height:1.9;
  font-family:ui-monospace,monospace;
  color:#aa8558;
}

.md-columns .code-muted {
  color:#b8a790;
}

.md-columns>div:last-child {
  padding:24px 16px;
  color:#7c674c;
  font-size:7px;
  line-height:1.9;
}

.md-columns strong {
  font-size:16px;
  letter-spacing:-.5px;
  font-weight:600;
}

.md-columns p {
  font-size:6px;
  margin-top:8px;
}

.md-columns h4 {
  margin-block:13px 6px;
  font-size:9px;
  font-weight:600;
}

.cartprevo-art {
  background:#e6f0ef;
  color:#769a95;
}

.import-preview {
  width:335px;
  background:#fcfefd;
  border:1px solid #d3e2df;
  border-radius:10px;
  box-shadow:0 18px 35px -15px #4a80753b;
  transform:rotate(3deg) translateY(8px);
  transition:transform .5s;
}

.app-card:hover .import-preview {
  transform:rotate(0) translateY(2px);
}

.import-preview-title {
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 15px;
  border-bottom:1px solid #e4eeeb;
}

.import-preview-title strong {
  font-size:9px;
  font-weight:550;
  letter-spacing:-.1px;
  color:#598579;
}

.import-preview-title>span {
  font-size:5px;
  color:#9bb3ad;
  margin-left:auto;
}

.review-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:11px 19px;
  border-bottom:1px solid #edf3f0;
}

.review-row>span {
  font-size:8px;
  color:#849b93;
}

.review-row em {
  font-size:6px;
  color:#83a392;
  background:#edf5ef;
  padding:4px 5px;
  border-radius:4px;
  font-style:normal;
}

.review-row .review-warning {
  color:#b18f50;
  background:#faf3e6;
}

.import-review-footer {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:6px;
  padding:11px;
  color:#8ba59a;
}

.small-shield {
  color:#639e85;
}

.card-body {
  padding:28px 29px 26px;
}

.app-card-heading {
  display:flex;
  align-items:center;
  gap:12px;
}

.app-card-heading img {
  border-radius:12px;
  width:42px;
  height:42px;
}

.app-card-heading>div {
  flex:1;
  min-width:0;
}

.app-card-heading h3 {
  font-size:20px;
  letter-spacing:-.65px;
  font-weight:600;
}

.app-card-heading>div>span {
  display:block;
  margin-top:5px;
  font-size:6px;
  letter-spacing:1.2px;
  color:#9b929f;
  line-height:1.6;
}

.platform {
  font-size:8px;
  border:1px solid #eae6eb;
  border-radius:5px;
  padding:5px 8px;
  color:#948a9c;
  white-space:nowrap;
}

.card-body>p {
  font-size:12px;
  line-height:1.85;
  color:#857e89;
  margin-top:19px;
  max-width:450px;
  min-height:66px;
}

.card-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-top:22px;
}

.development {
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#a0929e;
  font-size:8px;
  white-space:nowrap;
}

.development i {
  display:inline-block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#b6a8a7;
}

.collection-note {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:9px;
  color:#a095a2;
  margin-top:29px;
}

.collection-note .icon {
  width:12px;
  height:12px;
}

.approach-section {
  border-top:1px solid var(--line);
  background:#f4f3ef;
}

.approach-top h2 {
  margin-top:15px;
}

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

.principle {
  position:relative;
  border-top:1px solid #ded9e0;
  padding-top:25px;
}

.principle-icon {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:10px;
  color:#9a85bd;
  background:#eae5ef;
}

.principle-icon .icon {
  width:20px;
  height:20px;
}

.principle-number {
  position:absolute;
  right:0;
  top:35px;
  font-size:9px;
  color:#bbb1bf;
}

.principle h3 {
  font-size:17px;
  font-weight:560;
  letter-spacing:-.4px;
  margin-block:23px 12px;
}

.principle p {
  font-size:11px;
  color:#8a828e;
  line-height:1.95;
  max-width:310px;
}

.story-section {
  background:#2c2739;
  color:#f7f1ff;
  overflow:hidden;
}

.story-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:110px;
  align-items:center;
}

.story-visual {
  position:relative;
  height:330px;
  display:grid;
  place-items:center;
}

.story-orbit {
  position:absolute;
  width:340px;
  height:225px;
  border:1px solid #9b80c126;
  border-radius:50%;
  transform:rotate(-30deg);
}

.orbit-tilt {
  transform:rotate(45deg);
  width:270px;
  height:315px;
}

.divo-emblem {
  width:205px;
  height:205px;
  filter:drop-shadow(0 0 40px #ad8ee53b);
  animation:emblem-float 15s ease-in-out infinite;
}

.divo-emblem img {
  width:100%;
  height:100%;
}

.story-spark {
  position:absolute;
  color:#9f80bf;
  font-weight:300;
}

.story-spark-one {
  left:45px;
  top:30px;
  font-size:35px;
  animation:twinkle 6s infinite;
}

.story-spark-two {
  right:48px;
  bottom:38px;
  font-size:22px;
  animation:twinkle 5s -2s infinite;
}

.story-label {
  position:absolute;
  bottom:3px;
  color:#b49cce;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:17px;
  transform:rotate(-6deg);
  letter-spacing:.1px;
}

.story-copy .eyebrow {
  color:#ac94ca;
  font-size:9px;
}

.story-copy h2 {
  margin-block:22px 23px;
  line-height:1.18;
  font-size:43px;
  letter-spacing:-1.8px;
}

.story-copy p {
  font-size:12px;
  color:#b5a9c3;
  margin-top:15px;
  line-height:1.95;
}

.story-copy p strong {
  font-weight:550;
  color:#d9c7ee;
}

.story-copy .text-link {
  color:#dbcbef;
  margin-top:26px;
}

.faq-section {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:100px;
}

.faq-intro h2 {
  margin-top:17px;
}

.faq-list {
  border-top:1px solid var(--line);
}

.faq-list details {
  border-bottom:1px solid var(--line);
}

.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  list-style:none;
  cursor:pointer;
  font-size:12px;
  font-weight:550;
  padding-block:22px;
}

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

.faq-list summary>span {
  color:#a293b2;
  font-size:22px;
  font-weight:300;
  transition:transform .2s;
}

.faq-list details[open] summary>span {
  transform:rotate(45deg);
}

.faq-list p {
  font-size:11px;
  color:#8a818e;
  padding:0 28px 24px 0;
  line-height:1.95;
}

.closing-section {
  padding-bottom:100px;
}

.closing-inner {
  background:#eee9f5;
  border:1px solid #e5dcee;
  border-radius:15px;
  padding:45px 50px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
  overflow:hidden;
  position:relative;
}

.closing-inner>div,.closing-inner>.button {
  z-index:1;
}

.closing-inner .eyebrow {
  font-size:8px;
  letter-spacing:1.5px;
}

.closing-inner h2 {
  font-size:30px;
  letter-spacing:-1.2px;
  margin-top:14px;
}

.closing-emblem {
  position:absolute;
  width:180px;
  height:180px;
  right:210px;
  top:-40px;
  fill:none;
  stroke:#b8a4d528;
  stroke-width:.5;
  transform:rotate(15deg);
}

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

.footer-top {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:55px;
  padding-bottom:45px;
}

.footer-top>div:first-child>p {
  font-size:11px;
  color:#a094aa;
  margin-top:15px;
}

.footer-top nav {
  display:flex;
  flex-direction:column;
  gap:13px;
  align-items:flex-start;
}

.footer-top nav>span {
  font-size:7px;
  letter-spacing:1.4px;
  color:#a79aa9;
  margin-bottom:7px;
}

.footer-top nav>a {
  font-size:10px;
  color:#817487;
  display:flex;
  gap:5px;
  align-items:center;
}

.footer-top nav .icon {
  width:11px;
  height:11px;
}

.footer-top nav>a:hover {
  color:var(--purple);
}

.footer-note {
  padding-top:6px;
}

.footer-note>.icon {
  color:#af9dc5;
  width:27px;
  height:27px;
}

.footer-note p {
  font-size:11px;
  color:#a294ab;
  margin-top:12px;
}

.footer-bottom {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:22px;
  font-size:8px;
  color:#aa9faf;
}

.footer-bottom a:hover {
  text-decoration:underline;
}

.product-dialog {
  width:min(540px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  overflow:auto;
  border:1px solid #ded5e6;
  border-radius:19px;
  padding:37px;
  color:var(--ink);
  background:var(--paper);
  box-shadow:0 30px 100px #26153330;
}

.product-dialog::backdrop {
  background:#21192e80;
  backdrop-filter:blur(6px);
}

.dialog-close {
  position:absolute;
  right:19px;
  top:15px;
  font-size:27px;
  font-weight:300;
  width:33px;
  height:33px;
  background:#efebf3;
  border-radius:50%;
  color:#8c7d99;
}

.dialog-heading {
  display:flex;
  align-items:center;
  gap:19px;
  margin-bottom:25px;
}

.dialog-heading>.eyebrow {
  max-width:220px;
  font-size:8px;
  line-height:1.8;
}

.product-dialog h2 {
  font-size:38px;
}

.product-dialog>p {
  font-size:13px;
  color:#857b8d;
  margin-top:16px;
}

.dialog-meta {
  display:flex;
  gap:20px;
  align-items:center;
  padding-block:19px;
  border-bottom:1px solid var(--line);
  margin-bottom:23px;
}

.dialog-meta>span:first-child {
  font-size:10px;
  color:#8f8199;
}

.dialog-meta .development {
  font-size:9px;
}

.product-dialog>h3 {
  font-size:13px;
  font-weight:600;
}

.product-dialog ul {
  padding-left:18px;
  font-size:12px;
  color:#86798f;
  line-height:1.9;
  margin-block:14px 24px;
}

.product-dialog li {
  padding-left:4px;
  margin-block:5px;
}

.dialog-notice {
  background:#efebf3;
  border:1px solid #e4dce9;
  border-radius:8px;
  padding:13px 15px;
  font-size:10px;
  color:#94839d;
  line-height:1.8;
  margin-bottom:22px;
}

.product-dialog>.button {
  width:100%;
}

.legal-page {
  max-width:740px;
  padding-block:65px 100px;
}

.legal-page>.eyebrow {
  display:flex;
  margin-top:65px;
}

.legal-page h1 {
  font-size:47px;
  font-weight:550;
  letter-spacing:-2px;
  line-height:1.2;
  margin-block:20px 26px;
}

.legal-page h2 {
  font-size:23px;
  letter-spacing:-.5px;
  margin-bottom:15px;
}

.legal-page p {
  font-size:13px;
  color:#877b8f;
  margin-bottom:15px;
  line-height:1.9;
}

.legal-page section {
  margin-block:36px;
}

.legal-page p>a {
  text-decoration:underline;
  text-underline-offset:4px;
}

.reveal-ready {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease;
}

.reveal-ready.is-visible {
  opacity:1;
  transform:translateY(0);
}

@keyframes float {
  0%,100% {
    translate:0 0;
  }
  50% {
    translate:0 -9px;
  }
}

@keyframes twinkle {
  0%,100% {
    opacity:.4;
    scale:.9;
  }
  50% {
    opacity:1;
    scale:1.08;
  }
}

@keyframes scene-in {
  from {
    opacity:0;
    transform:translateY(6px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes underline-in {
  to {
    stroke-dashoffset:0;
  }
}

@keyframes laptop-open {
  0%,15%,90%,100% {
    transform:rotateX(0);
  }
  40%,57% {
    transform:rotateX(-84deg);
  }
}

@keyframes bar-in {
  from {
    scale:0 1;
  }
  to {
    scale:1 1;
  }
}

@keyframes ring-in {
  from {
    transform:rotate(-12deg);
    opacity:.4;
  }
  to {
    transform:rotate(0);
    opacity:1;
  }
}

@keyframes orb-drift {
  0%,100% {
    translate:0 0;
  }
  50% {
    translate:45px 20px;
  }
}

@keyframes sound-wave {
  0%,100% {
    scale:1 .6;
  }
  50% {
    scale:1 1.1;
  }
}

@keyframes emblem-float {
  0%,100% {
    transform:rotate(-8deg);
  }
  50% {
    transform:rotate(8deg);
  }
}

@media(min-width:1600px) {
  .hero {
    min-height:740px;
  }
  .hero h1 {
    font-size:110px;
  }
}

@media(max-width:1150px) {
  .container {
    width:calc(100% - 72px);
  }
  .hero {
    gap:15px;
    grid-template-columns:1fr 1fr;
  }
  .hero h1 {
    font-size:83px;
    letter-spacing:-5.5px;
  }
  .hero-copy .eyebrow {
    font-size:7px;
  }
  .hero-description {
    font-size:12px;
  }
  .hero-showcase {
    height:510px;
  }
  .spotlight-window {
    width:345px;
    top:120px;
  }
  .floating-app img {
    width:50px;
    height:50px;
  }
  .floating-lidplay {
    left:32px;
    top:15px;
  }
  .floating-mactidy {
    right:-3px;
    top:75px;
  }
  .floating-cartprevo {
    right:10px;
    bottom:0;
  }
  .orbit {
    width:390px;
  }
  .orbit-two {
    width:330px;
  }
  .showcase-controls {
    bottom:30px;
  }
  .scene-label {
    font-size:6px;
  }
  .markdown-scene {
    grid-template-columns:80px 1fr;
    margin-inline:20px;
  }
  .tidy-scene {
    gap:20px;
    margin-inline:22px;
  }
  .import-scene {
    margin-inline:20px;
  }
  .main-nav {
    gap:24px;
  }
  .card-body {
    padding:25px;
  }
  .card-art {
    height:265px;
  }
  .card-laptop {
    scale:.9;
  }
  .md-preview {
    width:330px;
  }
  .tidy-preview {
    width:310px;
  }
  .import-preview {
    width:310px;
  }
  .story-grid {
    gap:70px;
  }
  .principles-grid {
    gap:35px;
  }
  .footer-top {
    gap:35px;
  }
  .app-card-heading h3 {
    font-size:19px;
  }
  .app-card-heading>div>span {
    letter-spacing:.8px;
    font-size:5.5px;
  }
  .development {
    font-size:7px;
  }
}

@media(max-width:900px) {
  .nav-row {
    gap:20px;
  }
  .main-nav {
    gap:18px;
  }
  .main-nav a {
    font-size:10px;
  }
  .nav-cta {
    font-size:10px;
    gap:10px;
  }
  .hero {
    grid-template-columns:1fr;
    text-align:center;
    padding-top:55px;
    padding-bottom:35px;
    gap:20px;
    min-height:0;
  }
  .hero-copy {
    padding-bottom:0;
  }
  .hero-copy .eyebrow {
    font-size:9px;
  }
  .hero h1 {
    font-size:92px;
    letter-spacing:-6px;
    line-height:1.03;
  }
  .hero-description {
    font-size:13px;
    margin-top:29px;
  }
  .hero-actions {
    justify-content:center;
    margin-top:25px;
  }
  .hero-note {
    justify-content:center;
  }
  .hero-showcase {
    width:510px;
    max-width:100%;
    margin-inline:auto;
    height:505px;
  }
  .spotlight-window {
    width:385px;
    top:112px;
  }
  .floating-app img {
    width:56px;
    height:56px;
  }
  .floating-lidplay {
    left:42px;
    top:9px;
  }
  .floating-mactidy {
    right:0;
    top:65px;
  }
  .floating-mdlumen {
    left:2px;
    bottom:20px;
  }
  .floating-cartprevo {
    right:14px;
    bottom:-2px;
  }
  .showcase-controls {
    bottom:14px;
  }
  .orbit {
    width:445px;
  }
  .orbit-two {
    width:375px;
  }
  .collection-strip>.container {
    flex-wrap:wrap;
    justify-content:center;
    gap:23px;
    padding-block:23px;
  }
  .collection-strip>.container>span {
    flex-basis:100%;
    max-width:100%;
    text-align:center;
    font-size:7px;
  }
  .collection-strip a {
    font-size:11px;
  }
  .collection-strip img {
    width:21px;
    height:21px;
  }
  .section {
    padding-block:80px;
  }
  .section-heading {
    gap:35px;
  }
  .section-heading>p {
    font-size:11px;
    max-width:230px;
  }
  .section-heading h2 {
    font-size:32px;
  }
  .app-grid {
    gap:20px;
  }
  .card-art {
    height:235px;
  }
  .art-overline {
    font-size:6px;
    left:19px;
    top:20px;
  }
  .art-note {
    font-size:6px;
  }
  .card-laptop {
    scale:.8;
  }
  .sound-waves {
    right:20px;
    bottom:52px;
    scale:.9;
  }
  .tidy-preview {
    width:280px;
    scale:.9;
  }
  .tidy-preview-content {
    padding:25px 17px;
    gap:17px;
  }
  .md-preview {
    width:290px;
    scale:.95;
  }
  .md-columns>div:first-child {
    font-size:6px;
    padding-inline:10px;
  }
  .md-columns>div:last-child {
    padding-inline:12px;
  }
  .md-columns strong {
    font-size:13px;
  }
  .import-preview {
    width:280px;
    scale:.92;
  }
  .card-body {
    padding:22px 20px;
  }
  .app-card-heading {
    gap:9px;
  }
  .app-card-heading img {
    width:36px;
    height:36px;
    border-radius:10px;
  }
  .app-card-heading h3 {
    font-size:17px;
  }
  .app-card-heading>div>span {
    font-size:5px;
    letter-spacing:.3px;
  }
  .platform {
    font-size:6px;
    padding:4px 6px;
  }
  .card-body>p {
    font-size:10px;
    min-height:75px;
  }
  .card-bottom {
    gap:10px;
  }
  .card-bottom .text-link {
    font-size:10px;
    gap:7px;
  }
  .development {
    font-size:6px;
  }
  .collection-note {
    font-size:8px;
    line-height:1.7;
  }
  .principles-grid {
    gap:25px;
  }
  .principle h3 {
    font-size:15px;
  }
  .principle p {
    font-size:10px;
  }
  .story-grid {
    gap:40px;
  }
  .story-orbit {
    width:285px;
    height:200px;
  }
  .orbit-tilt {
    width:240px;
    height:280px;
  }
  .story-visual {
    height:310px;
  }
  .divo-emblem {
    width:170px;
    height:170px;
  }
  .story-copy h2 {
    font-size:34px;
  }
  .story-copy p {
    font-size:11px;
  }
  .story-spark-one {
    left:0;
  }
  .story-spark-two {
    right:10px;
  }
  .faq-section {
    gap:55px;
  }
  .closing-section {
    padding-bottom:75px;
  }
  .closing-inner {
    padding:35px;
  }
  .closing-inner h2 {
    font-size:27px;
  }
  .closing-emblem {
    right:150px;
  }
  .footer-top {
    grid-template-columns:1.2fr 1fr 1fr;
    gap:40px;
  }
  .footer-note {
    display:none;
  }
}

@media(max-width:640px) {
  html {
    scroll-padding-top:88px;
  }
  .container {
    width:calc(100% - 40px);
  }
  .nav-row {
    height:72px;
    gap:10px;
  }
  .brand {
    font-size:22px;
  }
  .brand img {
    width:31px;
    height:31px;
  }
  .nav-cta {
    margin-left:auto;
    font-size:9px;
    padding:10px 12px;
    gap:8px;
    min-height:35px;
  }
  .nav-cta .icon {
    width:13px;
    height:13px;
  }
  .menu-toggle {
    display:block;
    flex-shrink:0;
    width:34px;
    height:38px;
    padding:8px;
  }
  .main-nav {
    display:none;
    position:absolute;
    top:72px;
    left:0;
    right:0;
    padding:18px 23px 24px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 15px 20px #21142e08;
    flex-direction:column;
    gap:0;
    align-items:stretch;
  }
  .main-nav.is-open {
    display:flex;
  }
  .main-nav a {
    font-size:13px;
    padding:14px 0;
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(3.75px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-3.75px) rotate(-45deg);
  }
  .hero {
    padding-top:44px;
    gap:18px;
  }
  .hero-copy .eyebrow {
    font-size:6.5px;
    letter-spacing:1.25px;
    gap:5px;
  }
  .tiny-star {
    font-size:16px;
  }
  .hero h1 {
    font-size:79px;
    letter-spacing:-5px;
    margin-top:22px;
    line-height:1.01;
  }
  .shining-word svg {
    bottom:-9px;
    height:14px;
  }
  .hero-description {
    font-size:11px;
    line-height:1.95;
    margin-top:29px;
  }
  .hero-actions {
    gap:22px;
    margin-top:24px;
  }
  .hero-actions .button {
    font-size:10px;
    min-height:45px;
    padding:13px 16px;
    gap:17px;
  }
  .hero-actions .text-link {
    font-size:10px;
    gap:6px;
  }
  .hero-note {
    font-size:8px;
    margin-top:22px;
    gap:6px;
  }
  .hero-showcase {
    height:408px;
    margin-top:15px;
    width:350px;
  }
  .showcase-ambient {
    inset:10px -10px;
  }
  .spotlight-window {
    width:280px;
    top:97px;
    border-radius:10px;
  }
  .window-top {
    height:28px;
    padding-inline:11px;
  }
  .window-top>span {
    font-size:5px;
    letter-spacing:1px;
  }
  .window-dots i {
    width:4px;
    height:4px;
  }
  .window-dots {
    gap:3px;
  }
  .window-top>.icon {
    width:10px;
    height:10px;
  }
  .spotlight-scene {
    height:192px;
    padding-top:18px;
  }
  .scene-label {
    font-size:5px;
    letter-spacing:1.25px;
  }
  .laptop {
    width:212px;
    margin-top:18px;
  }
  .laptop-display {
    height:108px;
    border-width:4px;
    border-bottom-width:6px;
    border-radius:6px 6px 1px 1px;
  }
  .laptop-base {
    width:236px;
    margin-left:-12px;
    height:6px;
  }
  .wallpaper-play {
    font-size:35px;
  }
  .wallpaper-time {
    font-size:7px;
  }
  .wallpaper-ring {
    border-width:25px;
    width:200px;
    height:200px;
    left:-100px;
    top:-85px;
  }
  .ring-b {
    left:100px;
    top:40px;
  }
  .scene-caption {
    font-size:6px;
    bottom:11px;
  }
  .spotlight-bottom {
    height:39px;
    padding-inline:13px;
  }
  .spotlight-bottom strong {
    font-size:9px;
  }
  .spotlight-bottom>div>span {
    font-size:6px;
  }
  .concept-label {
    font-size:5px;
  }
  .spotlight-bottom>div {
    gap:10px;
  }
  .floating-app {
    padding:5px;
    gap:7px;
  }
  .floating-app img {
    width:44px;
    height:44px;
    border-radius:13px;
  }
  .floating-app span {
    font-size:8px;
  }
  .floating-lidplay {
    left:27px;
    top:0;
  }
  .floating-mactidy {
    right:2px;
    top:38px;
  }
  .floating-mdlumen {
    left:0;
    bottom:5px;
  }
  .floating-cartprevo {
    right:5px;
    bottom:-1px;
  }
  .orbit {
    width:312px;
    height:280px;
    top:45px;
  }
  .orbit-two {
    width:280px;
    height:350px;
    top:4px;
  }
  .spark-one {
    font-size:23px;
    right:87px;
    top:4px;
  }
  .spark-two {
    font-size:20px;
    left:-2px;
    top:175px;
  }
  .spark-three {
    right:2px;
    bottom:110px;
    font-size:20px;
  }
  .showcase-controls {
    bottom:10px;
    gap:11px;
  }
  .showcase-dots {
    gap:1px;
  }
  .motion-control {
    width:25px;
    height:25px;
    font-size:11px;
  }
  .tidy-scene {
    margin:20px 19px;
    gap:19px;
  }
  .tidy-ring {
    width:105px;
    height:105px;
    border-width:8px;
  }
  .tidy-ring strong {
    font-size:20px;
  }
  .tidy-ring small {
    font-size:8px;
  }
  .tidy-ring>.icon {
    width:13px;
    height:13px;
    margin-bottom:3px;
  }
  .tidy-ring>span {
    font-size:4px;
  }
  .tidy-bars {
    gap:11px;
  }
  .tidy-bars span {
    font-size:6px;
  }
  .tidy-bars i {
    height:4px;
  }
  .markdown-scene {
    margin:14px 18px;
    height:124px;
    grid-template-columns:71px 1fr;
  }
  .markdown-scene aside {
    padding:12px 6px;
    gap:11px;
  }
  .markdown-scene aside span,.markdown-scene aside b {
    font-size:5px;
  }
  .markdown-scene aside>span:first-child {
    font-size:5px;
  }
  .markdown-scene>div {
    padding:9px 12px;
  }
  .markdown-scene h3 {
    font-size:16px;
    margin-top:5px;
  }
  .markdown-scene p {
    font-size:4px;
  }
  .document-tag {
    font-size:5px;
  }
  .doc-check {
    font-size:4px;
    margin-top:6px;
  }
  .document-line {
    height:2px;
    margin-top:5px;
  }
  .import-scene {
    margin:15px 16px;
  }
  .import-file>.icon {
    width:21px;
    height:21px;
  }
  .import-file>span {
    font-size:7px;
  }
  .import-file small {
    font-size:5px;
  }
  .import-table {
    margin-top:11px;
  }
  .import-table>* {
    font-size:5px;
    padding:6px;
  }
  .import-table>span,.import-table>em {
    font-size:5px;
  }
  .import-result {
    font-size:5px;
    margin-top:7px;
  }
  .collection-strip>.container {
    gap:21px 25px;
    padding-block:23px;
  }
  .collection-strip>.container>span {
    font-size:6px;
    letter-spacing:1.25px;
  }
  .collection-strip a {
    font-size:10px;
    gap:6px;
  }
  .collection-strip img {
    width:20px;
    height:20px;
  }
  .section {
    padding-block:63px;
  }
  .section-heading {
    display:block;
    margin-bottom:30px;
  }
  h2,.section-heading h2 {
    font-size:30px;
    letter-spacing:-1.4px;
    line-height:1.22;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:1.4px;
  }
  .section-heading>p {
    font-size:11px;
    max-width:300px;
    margin-top:19px;
  }
  .app-grid {
    grid-template-columns:1fr;
    gap:25px;
  }
  .app-card {
    border-radius:13px;
  }
  .card-art {
    height:250px;
  }
  .art-overline {
    font-size:6px;
    top:22px;
    left:23px;
    letter-spacing:1.4px;
  }
  .art-note {
    font-size:7px;
  }
  .card-laptop {
    scale:.85;
  }
  .sound-waves {
    right:35px;
    bottom:55px;
  }
  .tidy-preview {
    width:300px;
    scale:.95;
  }
  .md-preview {
    width:310px;
    scale:.95;
  }
  .md-columns>div:first-child {
    font-size:6px;
  }
  .md-columns>div:last-child {
    padding-inline:13px;
  }
  .md-columns strong {
    font-size:14px;
  }
  .import-preview {
    width:295px;
    scale:.97;
  }
  .card-body {
    padding:25px 23px;
  }
  .app-card-heading {
    gap:11px;
  }
  .app-card-heading img {
    width:40px;
    height:40px;
  }
  .app-card-heading h3 {
    font-size:20px;
  }
  .app-card-heading>div>span {
    font-size:5px;
    letter-spacing:.6px;
  }
  .platform {
    font-size:7px;
    padding:5px 7px;
  }
  .card-body>p {
    font-size:11px;
    min-height:0;
    margin-top:17px;
  }
  .card-bottom {
    margin-top:23px;
  }
  .card-bottom .text-link {
    font-size:11px;
  }
  .development {
    font-size:7px;
  }
  .collection-note {
    font-size:7px;
    text-align:center;
    align-items:flex-start;
    line-height:1.9;
    gap:6px;
    margin-top:23px;
    padding-inline:7px;
  }
  .collection-note .icon {
    margin-top:1px;
  }
  .principles-grid {
    grid-template-columns:1fr;
    gap:31px;
    margin-top:34px;
  }
  .principle {
    padding-top:21px;
  }
  .principle h3 {
    font-size:18px;
    margin-block:17px 10px;
  }
  .principle p {
    font-size:11px;
    max-width:none;
    line-height:1.9;
  }
  .principle-number {
    top:32px;
  }
  .story-grid {
    grid-template-columns:1fr;
    gap:35px;
  }
  .story-visual {
    height:250px;
  }
  .story-orbit {
    width:280px;
    height:185px;
  }
  .orbit-tilt {
    width:220px;
    height:250px;
  }
  .divo-emblem {
    width:155px;
    height:155px;
  }
  .story-label {
    font-size:16px;
    bottom:0;
  }
  .story-spark-one {
    left:35px;
    top:8px;
  }
  .story-spark-two {
    right:42px;
    bottom:22px;
  }
  .story-copy {
    padding-inline:4px;
  }
  .story-copy .eyebrow {
    font-size:8px;
  }
  .story-copy h2 {
    font-size:34px;
    margin-block:19px 22px;
  }
  .story-copy p {
    font-size:12px;
  }
  .story-copy .text-link {
    font-size:11px;
  }
  .faq-section {
    grid-template-columns:1fr;
    gap:29px;
  }
  .faq-list summary {
    font-size:11px;
    padding-block:21px;
    gap:14px;
  }
  .faq-list p {
    font-size:11px;
    padding-right:15px;
  }
  .closing-section {
    padding-bottom:62px;
  }
  .closing-inner {
    padding:30px 26px;
    display:block;
    border-radius:12px;
  }
  .closing-inner h2 {
    font-size:28px;
    letter-spacing:-1.2px;
  }
  .closing-inner .button {
    margin-top:25px;
    font-size:11px;
    gap:23px;
  }
  .closing-emblem {
    right:-20px;
    top:125px;
    width:140px;
    height:140px;
  }
  .site-footer {
    padding-top:32px;
  }
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:32px 25px;
    padding-bottom:32px;
  }
  .footer-top>div:first-child {
    grid-column:1/-1;
  }
  .footer-top>div:first-child>p {
    font-size:10px;
    margin-top:12px;
  }
  .footer-top nav>a {
    font-size:11px;
  }
  .footer-top nav>span {
    font-size:7px;
  }
  .footer-top nav {
    gap:14px;
  }
  .footer-bottom {
    flex-wrap:wrap;
    font-size:8px;
    gap:15px;
    line-height:1.6;
  }
  .footer-bottom>span:nth-child(2) {
    margin-left:auto;
  }
  .footer-bottom a {
    flex-basis:100%;
  }
  .product-dialog {
    padding:28px 24px;
    border-radius:15px;
  }
  .dialog-heading {
    gap:16px;
    margin-bottom:20px;
  }
  .dialog-heading>img {
    width:49px;
    height:49px;
  }
  .dialog-heading>.eyebrow {
    font-size:7px;
    max-width:180px;
  }
  .product-dialog h2 {
    font-size:33px;
  }
  .product-dialog>p {
    font-size:12px;
  }
  .product-dialog ul {
    font-size:11px;
  }
  .product-dialog>.button {
    font-size:11px;
  }
  .legal-page {
    padding-block:35px 65px;
  }
  .legal-page h1 {
    font-size:36px;
  }
  .legal-page p {
    font-size:12px;
  }
  .legal-page>.eyebrow {
    margin-top:45px;
  }
}

@media(max-width:359px) {
  .container {
    width:calc(100% - 32px);
  }
  .nav-cta {
    font-size:8px;
    padding-inline:9px;
    gap:6px;
  }
  .brand {
    font-size:19px;
  }
  .brand img {
    width:28px;
    height:28px;
    margin-right:7px;
  }
  .hero h1 {
    font-size:70px;
  }
  .hero-copy .eyebrow {
    font-size:5.8px;
  }
  .hero-showcase {
    height:395px;
  }
  .spotlight-window {
    width:252px;
    top:95px;
  }
  .floating-app img {
    width:39px;
    height:39px;
  }
  .floating-lidplay {
    left:19px;
  }
  .orbit {
    width:270px;
  }
  .orbit-two {
    width:250px;
  }
  .floating-app span {
    font-size:7px;
  }
  .laptop {
    width:195px;
  }
  .laptop-base {
    width:217px;
    margin-left:-11px;
  }
  .import-table>* {
    padding-inline:4px;
  }
  .tidy-scene {
    gap:14px;
    margin-inline:17px;
  }
  .tidy-ring {
    width:100px;
    height:100px;
  }
  .tidy-bars span {
    font-size:5px;
  }
  .markdown-scene {
    grid-template-columns:60px 1fr;
  }
  .markdown-scene>div {
    padding-inline:10px;
  }
  .markdown-scene h3 {
    font-size:15px;
  }
  .card-laptop {
    scale:.78;
  }
  .tidy-preview {
    scale:.85;
  }
  .md-preview {
    scale:.85;
  }
  .import-preview {
    scale:.87;
  }
  .card-art {
    height:230px;
  }
  .card-body {
    padding:22px 19px;
  }
  .app-card-heading>div>span {
    font-size:4.4px;
  }
  .platform {
    font-size:6px;
  }
  .card-bottom .text-link {
    font-size:10px;
  }
  .development {
    font-size:6px;
  }
  .story-orbit {
    width:255px;
  }
  .orbit-tilt {
    width:220px;
  }
  .story-spark-one {
    left:12px;
  }
  .footer-bottom {
    font-size:7px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
  .shining-word svg {
    stroke-dashoffset:0;
  }
  .reveal-ready {
    opacity:1;
    transform:none;
  }
  .hero-showcase:hover .spotlight-window {
    transform:translateX(-50%) rotate(-3deg);
  }
  .app-card:hover {
    transform:none;
  }
  .sound-waves i {
    scale:1 1;
  }
}

.dialog-open {
  overflow:hidden;
}

.animations-paused * {
  animation-play-state:paused!important;
}

/* Legible text colors;
the lighter palette is reserved for decorative artwork. */
.main-nav a {
  color:#65606d;
}

.hero-description,.hero-note {
  color:#726979;
}

.hero-copy .eyebrow,.eyebrow {
  color:#766982;
}

.collection-strip>.container>span {
  color:#786f81;
}

.collection-strip a {
  color:#6b6174;
}

.section-heading>p,.card-body>p {
  color:#766b7e;
}

.app-card-heading>div>span,.platform,.development {
  color:#7e6e87;
}

.development i {
  background:#9a87a4;
}

.collection-note {
  color:#7f7088;
}

.principle p {
  color:#776c7f;
}

.principle-number {
  color:#83718e;
}

.faq-list p {
  color:#796d82;
}

.footer-top>div:first-child>p,.footer-top nav>a,.footer-note p,.footer-bottom {
  color:#7b6b85;
}

.footer-top nav>span {
  color:#7d6a88;
}

.product-dialog>p,.product-dialog ul,.dialog-meta>span:first-child {
  color:#796a83;
}

.dialog-notice {
  color:#796783;
}

.legal-page p {
  color:#776580;
}

.floating-app span {
  color:#77667f;
}

.spotlight-bottom>div>span,.concept-label {
  color:#7e6d8a;
}

.scene-label,.scene-caption {
  color:#7e6b8e;
}

#scene-mactidy .scene-label,#scene-mactidy .scene-caption {
  color:#697b50;
}

.motion-control {
  color:#765f89;
}

.hero-showcase {
  overflow:clip;
}

.floating-mactidy {
  right:0;
}

.hero-showcase.is-paused .spotlight-scene,.hero-showcase.is-paused .spotlight-scene * {
  animation:none!important;
}

/* Product copy remains readable on smaller displays. */
.card-body>p {
  font-size:13px;
}

.principle p,.faq-list p {
  font-size:12px;
}

@media(max-width:640px) {
  .hero-description {
    font-size:12px;
  }
  .card-body>p,.principle p,.faq-list p {
    font-size:12px;
  }
  .section-heading>p {
    font-size:12px;
  }
  .card-body>p {
    line-height:1.85;
  }
}


/* AppDivo’s interlocking A/D identity. */
.brand-mini {
  width: 22px;
  height: 22px;
  color: #7d65b2;
  margin-right: 2px;
}
.divo-emblem {
  display: grid;
  place-items: center;
}
.divo-emblem img {
  object-fit: contain;
}
.closing-emblem {
  color: #b7a2d4;
  opacity: .27;
  stroke: none;
}
.wallpaper-play {
  font-size: 30px;
  margin-bottom: 4px;
}
@media (max-width: 640px) {
  .brand-mini { width: 18px; height: 18px; }
  .wallpaper-play { font-size: 25px; }
}

/* MDLumen leads the collection. */
.hero-featured {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 25px;
  padding: 9px 12px 9px 9px;
  border: 1px solid #e7dcc7;
  border-radius: 9px;
  background: #f5efe4;
  color: #847359;
  font-size: 10px;
}
.hero-featured img { border-radius: 7px; }
.hero-featured strong { color: #6e5736; font-weight: 650; margin-left: 5px; }
.hero-featured .icon { width: 13px; height: 13px; margin-left: 4px; }
.featured-card { border-color: #d6bc89; box-shadow: 0 8px 28px -20px #9c783f55; }
.featured-card:hover { border-color: #b89455; box-shadow: 0 18px 40px -20px #9c783f55; }
.featured-card .mdlumen-art { background: radial-gradient(ellipse at 65% 60%, #fae2b9, transparent 70%), #f3eadc; }
.featured-card .featured-badge { background: #f6ecd7; border-color: #e8d6af; color: #806235; font-size: 8px; font-weight: 600; }

/* LidPlay: a real hinge motion with the collection’s marks on the display. */
.card-laptop { perspective: 800px; }
.card-laptop-screen {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  animation: laptop-open 6.5s ease-in-out infinite;
}
.lidplay-greeting { font-size: 53px; letter-spacing: -3px; font-weight: 450; z-index: 1; padding-bottom: 15px; }
.lidplay-dock {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 5px 7px;
  border: 1px solid #ffffff66;
  border-radius: 9px;
  background: #ffffff3d;
  z-index: 2;
}
.lidplay-dock img { border-radius: 6px; box-shadow: 0 2px 4px #35294020; }
.wallpaper-logo { z-index: 1; border-radius: 9px; margin-top: -18px; box-shadow: 0 3px 10px #30263830; }
.lidplay-hero-dock { position: absolute; bottom: 7px; display: flex; gap: 5px; z-index: 2; }
.lidplay-hero-dock img { width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 2px 4px #35294020; }

/* A clear way to reach the studio. */
.contact-section { border-top: 1px solid var(--line); background: #f4f1f7; margin-bottom: 75px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 105px; align-items: center; }
.contact-copy h2 { margin-top: 18px; }
.contact-copy > p { margin-top: 23px; color: #7d6d86; font-size: 13px; max-width: 400px; }
.contact-email { color: #665282; font-weight: 550; text-decoration: underline; text-underline-offset: 3px; }
.contact-reasons { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 25px 30px; }
.contact-reasons span { border: 1px solid #e2d9e9; background: #ece6f1; color: #7a6889; padding: 7px 9px; border-radius: 5px; font-size: 9px; }
.contact-copy .text-link { color: #756084; }
.contact-form { background: #fffdfd; border: 1px solid #dfd6e6; border-radius: 14px; padding: 30px; box-shadow: 0 14px 35px -25px #4c315e40; }
.contact-form-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 24px; }
.contact-form-heading h3 { font-size: 20px; letter-spacing: -.6px; font-weight: 550; }
.contact-form-heading > span { font-size: 7px; letter-spacing: 1px; color: #8e799d; }
.contact-form label { display: block; font-size: 11px; font-weight: 550; margin-block: 17px 8px; color: #6e5c7a; }
.contact-form input,.contact-form select,.contact-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid #e2dbe7;
  border-radius: 7px;
  background: #faf8fc;
  color: #584561;
  padding: 12px;
  font: inherit;
  font-size: 12px;
  line-height: 1.5;
}
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form input::placeholder,.contact-form textarea::placeholder { color: #897b92; }
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus { outline: 2px solid #9e8ab8; outline-offset: 3px; }
.contact-form .contact-note { font-size: 10px; line-height: 1.8; color: #7f6d8a; margin-block: 14px 20px; }
.contact-form .button { width: 100%; font-size: 11px; justify-content: space-between; }
.contact-direct { display: block; margin-top: 15px; text-align: center; font-size: 10px; color: #7a648a; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .contact-grid { gap: 40px; }
  .contact-form { padding: 24px; }
  .contact-copy h2 { font-size: 32px; }
}
@media (max-width: 640px) {
  .hero-featured { font-size: 9px; margin-top: 21px; }
  .hero-featured img { width: 22px; height: 22px; }
  .featured-card .featured-badge { font-size: 6px; padding-inline: 6px; }
  .wallpaper-logo { width: 28px; height: 28px; border-radius: 7px; margin-top: -13px; }
  .lidplay-hero-dock { bottom: 5px; gap: 4px; }
  .lidplay-hero-dock img { width: 13px; height: 13px; border-radius: 3px; }
  .contact-grid { grid-template-columns: 1fr; gap: 30px; }
  .contact-copy > p { font-size: 12px; }
  .contact-copy h2 { font-size: 30px; }
  .contact-form { padding: 24px; }
  .contact-section { margin-bottom: 58px; }
  .contact-form input,.contact-form select,.contact-form textarea { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .card-laptop-screen,.laptop-display { transform: none; animation: none!important; }
}

/* LidPlay’s product-accurate demo: one hinge angle drives the screen effect. */
.featured-card .card-art,.lidplay-card .card-art { height: 370px; }
.lp-demo { --lp-tilt: 22deg; }
.lp-hero-demo { position: absolute; top: 36px; left: 0; right: 0; height: 172px; }
.lp-card-demo { position: absolute; top: 43px; left: 20px; right: 20px; }
.lp-scene {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 220px;
  padding-top: 5px;
  perspective: 850px;
  perspective-origin: 50% -10%;
}
.lp-model { position: relative; width: min(270px, 86%); height: max-content; transform-style: preserve-3d; }
.lp-lid {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.3;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transform: rotateX(var(--lp-tilt));
}
.lp-bezel,.lp-lid-back { position: absolute; inset: 0; border-radius: 9px 9px 3px 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lp-bezel { padding: 2.6% 2.6% 3.4%; background: #15131b; border: 1px solid #53505c; box-shadow: inset 0 0 0 1px #211a2a; }
.lp-lid-back { display: grid; place-items: center; transform: rotateX(180deg); background: linear-gradient(160deg, #d0cbd9, #97909f); border: 1px solid #b8aebd; }
.lp-lid-back img { border-radius: 8px; opacity: .8; }
.lp-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 4px 4px 1px 1px; background: #08060b; }
.lp-screen-content { position: absolute; inset: 0; overflow: hidden; }
.lp-wallpaper {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 25% 30%, #faac81, transparent 50%), radial-gradient(circle at 80% 20%, #a68be3, transparent 50%), radial-gradient(circle at 60% 90%, #d677a6, transparent 60%), #6e569c;
}
.lp-menubar { position: absolute; inset: 0 0 auto; display: flex; align-items: center; gap: 6px; height: 11%; padding: 0 3%; background: #30213444; color: white; font-size: 5px; }
.lp-menubar img { border-radius: 2px; }
.lp-menubar > span:last-child { margin-left: auto; }
.lp-app-window { position: absolute; top: 23%; left: 18%; width: 62%; padding: 6% 5%; border-radius: 5px; background: #fff8f0ed; box-shadow: 0 5px 15px #34213840; }
.lp-window-dots { display: flex; gap: 3px; margin-bottom: 8%; }
.lp-window-dots i { width: 3px; height: 3px; border-radius: 50%; background: #ddafa7; }
.lp-window-dots i:nth-child(2) { background: #dfc27e; }
.lp-window-dots i:nth-child(3) { background: #a8bf91; }
.lp-app-window strong { display: block; color: #67506f; font-size: 9px; font-weight: 600; letter-spacing: -.2px; }
.lp-doc-line { height: 3px; margin-top: 7%; border-radius: 2px; background: #dacee0; width: 92%; }
.lp-doc-line.lp-short { width: 65%; margin-top: 4%; }
.lp-app-window > span { display: block; font-size: 4px; margin-top: 8%; color: #a087a3; }
.lp-dock { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px 6px; border-radius: 6px; background: #ffffff44; border: 1px solid #ffffff55; }
.lp-dock img { width: 19px; height: 19px; border-radius: 5px; }
.lp-frost { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, #ffffff66, #ffffff1a 70%, transparent); pointer-events: none; }
.lp-shutter { display: none; position: absolute; left: 0; right: 0; height: 0; background: repeating-linear-gradient(180deg, #211a2d 0 5px, #140f1e 5px 6px); }
.lp-shutter-top { top: 0; box-shadow: 0 2px 6px #0c061f55; }
.lp-shutter-bottom { bottom: 0; box-shadow: 0 -2px 6px #0c061f55; }
[data-effect="shutter"] .lp-shutter { display: block; }
.lp-glare { position: absolute; inset: 0; background: linear-gradient(115deg, #ffffff1a, transparent 35%); pointer-events: none; }
.lp-base {
  position: absolute;
  top: 100%;
  left: -6%;
  width: 112%;
  height: 72%;
  transform-origin: 50% 0;
  transform: rotateX(90deg);
  border-radius: 3px 3px 12px 12px;
  background: linear-gradient(180deg, #bab4c5, #e0d9e4 60%, #a9a0b5);
  box-shadow: 0 2px 0 #93869f;
}
.lp-keyboard { position: absolute; left: 10%; right: 10%; top: 9%; height: 46%; border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0 calc(6.66% - 2px), #a89caf calc(6.66% - 2px) 6.66%), repeating-linear-gradient(0deg, transparent 0 6px, #a89caf 6px 8px), #4a3d58; opacity: .85; }
.lp-trackpad { position: absolute; left: 34%; right: 34%; bottom: 9%; height: 30%; border-radius: 4px; background: #ffffff33; box-shadow: inset 0 0 0 1px #7b6b7f33; }
.lp-hero-demo .lp-scene { height: 172px; }
.lp-hero-demo .lp-model { width: 225px; }
.lp-hero-demo .lp-app-window strong { font-size: 7px; }
.lp-hero-demo .lp-app-window > span { font-size: 3px; }
.lp-hero-demo .lp-dock img { width: 15px; height: 15px; border-radius: 4px; }
.lp-hero-demo .lp-menubar { font-size: 4px; }
.lp-readout { display: flex; justify-content: center; gap: 19px; color: #7d668e; font-size: 9px; font-variant-numeric: tabular-nums; line-height: 1.5; }
.lp-readout span > output { font-weight: 600; margin-left: 4px; }
.lp-controls { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 11px; }
.lp-controls label { display: flex; align-items: center; gap: 8px; font-size: 9px; color: #80678f; }
.lp-controls select,.lp-controls button { border: 1px solid #d8c9e2; border-radius: 6px; color: #765b87; background: #fcf8fd; font: inherit; font-size: 10px; padding: 7px 9px; min-height: 32px; }
.lp-controls select { width: 91px; }
.lp-controls button { min-width: 85px; }
.lp-controls select:focus-visible,.lp-controls input:focus-visible,.lp-slider input:focus-visible { outline: 2px solid #8870ad; outline-offset: 4px; }
.lp-slider { display: flex; align-items: center; gap: 14px; width: min(270px, 100%); margin: 11px auto 0; font-size: 9px; color: #80678f; }
.lp-slider > span { white-space: nowrap; }
.lp-slider input { width: 100%; min-width: 0; accent-color: #9978b8; cursor: ew-resize; height: 18px; }
@media (max-width: 640px) {
  .featured-card .card-art,.lidplay-card .card-art { height: 390px; }
  .lp-card-demo { top: 44px; left: 17px; right: 17px; }
  .lp-controls select,.lp-controls button { min-height: 40px; }
  .lp-controls select { font-size: 16px; width: 100px; }
  .lp-slider input { height: 28px; }
  .lp-hero-demo { top: 31px; height: 141px; }
  .lp-hero-demo .lp-scene { height: 141px; }
  .lp-hero-demo .lp-model { width: 177px; }
  .lp-hero-demo .lp-menubar { font-size: 3px; }
  .lp-hero-demo .lp-menubar img { width: 7px; height: 7px; }
  .lp-hero-demo .lp-app-window strong { font-size: 6px; }
  .lp-hero-demo .lp-app-window > span { font-size: 2.5px; }
  .lp-hero-demo .lp-dock { gap: 3px; padding: 3px 4px; }
  .lp-hero-demo .lp-dock img { width: 11px; height: 11px; border-radius: 3px; }
}

.lidplay-art .art-note { bottom: 10px; }

/* Redirect placeholders remain inactive until a product website is configured. */
[data-product-link][aria-disabled="true"] {
  color: #8d8297;
  cursor: default;
  text-decoration: none;
}
[data-product-link][aria-disabled="true"] .icon { opacity: .45; }
[data-product-link][aria-disabled="true"]:hover .icon { transform: none; }

/* Standard copyright, attribution and footer links. */
.footer-bottom { align-items: center; font-size: 10px; flex-wrap: wrap; }
.footer-legal-links { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.footer-legal-links a { flex-basis: auto; }
.footer-legal-notice { padding-bottom: 23px; color: #7b6b85; font-size: 9px; line-height: 1.8; }
.legal-footer { padding-top: 0; }
.legal-footer .footer-bottom { border-top: 0; }
@media (max-width: 640px) {
  .footer-bottom { gap: 14px; font-size: 9px; }
  .footer-legal-links { width: 100%; gap: 19px; }
  .footer-legal-links a { flex-basis: auto; }
  .footer-legal-notice { font-size: 8px; }
}

/* CartPrevo’s Shopify catalog positioning. */
.cartprevo-card .app-card-heading > div > span {
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: 0;
  color: #607e77;
}
.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 17px 0 0;
  padding: 0;
}
.product-tags li {
  padding: 5px 8px;
  border: 1px solid #d8e7e2;
  border-radius: 5px;
  background: #f0f6f3;
  color: #5d7b70;
  font-size: 9px;
  line-height: 1.5;
}