:root {
  color-scheme:dark;
  --bg:#0f111a;
  --ink:#f0f0f0;
  --muted:#a6adba;
  --accent:#b49aff;
  --blue:#74b9ff;
  --line:rgba(255,255,255,.12)}
* {
  box-sizing:border-box}
html {
  background:var(--bg);
  scroll-behavior:smooth}
body {
  margin:0;
  min-width:320px;
  color:var(--ink);
  background:radial-gradient(circle at 14% 0,var(--glow,rgba(157,116,239,.17)),transparent 36rem),radial-gradient(circle at 92% 100%,rgba(116,185,255,.10),transparent 32rem),var(--bg);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.6}
a {
  color:var(--accent);
  text-decoration:none}
a:hover {
  text-decoration:underline}
a:focus-visible,button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:5px}
.skip {
  position:absolute;
  top:-60px}
.skip:focus {
  top:12px}
.wrap {
  width:min(1100px,100%);
  margin:auto;
  padding:0 24px}
.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:30px 0}
.brand {
  font-weight:750;
  color:var(--ink);
  letter-spacing:.02em}
.links {
  display:flex;
  flex-wrap:wrap;
  gap:22px;
  font-size:.87rem}
.hero {
  padding:72px 0 52px;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  align-items:center;
  gap:32px}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--accent);
  font-size:.74rem;
  font-weight:750}
h1 {
  font-size:clamp(3rem,6vw,5rem);
  letter-spacing:-.055em;
  line-height:1.05;
  margin:14px 0 24px}
h1 span {
  color:var(--accent)}
h2 {
  font-size:clamp(1.6rem,3vw,2.2rem);
  line-height:1.2;
  letter-spacing:-.035em}
h3 {
  margin:0 0 10px;
  font-size:1.08rem}
.lead {
  color:var(--muted);
  font-size:1.08rem;
  max-width:620px}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:30px 0 18px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:999px;
  min-height:46px;
  padding:11px 23px;
  color:var(--ink);
  font-weight:650}
.primary {
  background:linear-gradient(120deg,var(--accent),var(--blue));
  color:#10121b;
  border:0}
.button:hover {
  filter:brightness(1.1);
  text-decoration:none}
.small {
  font-size:.8rem;
  color:var(--muted)}
.icon {
  width:min(260px,85%);
  justify-self:center;
  filter:drop-shadow(0 24px 48px rgba(0,0,0,.35))}
.demo {
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  background:#151923;
  box-shadow:0 32px 72px #0005}
.demo-top {
  padding:15px 22px;
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:12px}
.dots {
  color:#777e90;
  letter-spacing:.2em}
.demo-body {
  display:grid;
  grid-template-columns:210px 1fr}
.outline {
  padding:22px;
  background:#11151e;
  color:var(--muted);
  font-size:.9rem;
  line-height:2}
.selected {
  background:#b49aff22;
  color:#d8c7ff;
  border-radius:7px;
  padding:0 10px}
.rows {
  padding:22px;
  overflow-x:auto}
table {
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  white-space:nowrap}
th {
  text-align:left;
  color:var(--muted);
  font-size:.75rem;
  font-weight:600}
td,th {
  padding:13px 10px;
  border-bottom:1px solid var(--line)}
.sunday {
  background:#ffe88316}
.sample {
  margin:14px 0;
  color:var(--muted);
  font-size:.8rem}
section {
  padding:50px 0}
.grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px}
.card {
  padding:27px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#ffffff04}
.card p {
  color:var(--muted);
  margin:0}
.step {
  color:var(--accent);
  font-size:.75rem;
  font-weight:750}
.note {
  padding:22px 26px;
  border-left:3px solid var(--accent);
  background:#b49aff0a;
  color:var(--muted);
  border-radius:0 12px 12px 0}
footer {
  border-top:1px solid var(--line);
  padding:30px 0 42px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:.8rem;
  color:var(--muted)}
.document {
  width:min(820px,100%);
  margin:40px auto 90px}
.document h1 {
  font-size:clamp(2.4rem,5vw,3.6rem)}
.document section {
  padding:18px 0}
.document li {
  margin:9px 0}
.document p {
  color:var(--muted)}
code {
  overflow-wrap:anywhere}
#checksum {
  white-space:normal;
  word-break:break-all}
.download-meta {
  max-width:620px}
details {
  border-bottom:1px solid var(--line);
  padding:20px 0}
summary {
  cursor:pointer;
  font-weight:650}
details p {
  color:var(--muted)}
@media(max-width:720px) {
  .hero {
  grid-template-columns:1fr;
  padding-top:36px}
.icon {
  display:none}
.grid {
  grid-template-columns:1fr}
.demo-body {
  grid-template-columns:1fr}
.outline {
  display:none}
.wrap {
  padding:0 18px}
.nav,footer {
  align-items:flex-start;
  flex-direction:column}
.links {
  gap:15px}
section {
  padding:30px 0}
.rows {
  padding:12px}
.demo-top {
  font-size:.8rem}
}


/* Shared product shell. Keep product accents while sharing layout and controls. */
body[data-product="memora"] {
  --accent:#f3b66a;
  --blue:#c19bff;
  --glow:rgba(243,166,74,.14)}

body[data-product="mac-monitor"] {
  --accent:#50d5e3;
  --blue:#74b9ff;
  --glow:rgba(80,213,227,.14);
  --gradient-1:var(--accent)}

body {
  min-height:100vh;
  -webkit-font-smoothing:antialiased}

.brand span {
  color:var(--muted)}
.links a {
  color:var(--muted);
  min-height:44px;
  display:inline-flex;
  align-items:center}
.links a[aria-current="page"] {
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:8px}

.nav {
  border-bottom:1px solid var(--line)}
.hero>*,.grid>*,.support-grid>* {
  min-width:0}

.card p+p {
  margin-top:12px}
.latest-updates {
  border-top:1px solid var(--line)}
.latest-updates li {
  color:var(--muted);
  margin:12px 0;
  overflow-wrap:anywhere}

.showcase {
  padding:28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#ffffff04}

.phone-gallery {
  display:flex;
  justify-content:center;
  gap:22px;
  overflow:hidden}
.phone-gallery img {
  display:block;
  width:25%;
  max-width:240px;
  height:auto;
  align-self:flex-start;
  border:6px solid #080a10;
  border-radius:26px;
  box-shadow:0 20px 40px #0004}
.phone-gallery img:nth-child(2) {
  margin-top:26px}

.monitor-art {
  width:100%;
  max-width:350px;
  justify-self:center;
  padding:25px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#151923;
  box-shadow:0 24px 48px #0005;
  transform:rotate(-3deg)}
.monitor-art h3 {
  font-size:.95rem}
.monitor-art p {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:.85rem;
  margin:20px 0 7px}
.meter {
  height:6px;
  border-radius:99px;
  background:#ffffff14;
  overflow:hidden}
.meter span {
  display:block;
  height:100%;
  width:var(--value);
  background:linear-gradient(90deg,var(--accent),var(--blue))}
.monitor-art .small {
  display:block;
  margin-top:24px}

.support-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
  padding:45px 0 70px}
.support-grid section {
  padding:12px 0}
.support-grid h1 {
  font-size:clamp(2.4rem,5vw,3.6rem)}

.form {
  display:grid;
  gap:20px}
.form label {
  display:grid;
  gap:8px;
  font-weight:600}
.form input,.form textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:#0f111a;
  color:var(--ink);
  padding:13px 14px;
  font:inherit}
.form textarea {
  resize:vertical;
  min-height:180px}
.form :is(input,textarea):focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px}
.form button {
  font:inherit;
  cursor:pointer}
.form button:disabled {
  opacity:.6;
  cursor:wait}
.honeypot {
  position:absolute!important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)}
.status {
  margin:0;
  font-size:.9rem;
  overflow-wrap:anywhere}
.status:empty {
  display:none}
.status.success {
  color:#81dec2}
.status.error {
  color:#ffb4ab}

@media(max-width:720px) {
  .support-grid {
  grid-template-columns:1fr;
  gap:24px;
  padding-top:24px}
.phone-gallery {
  gap:10px;
  padding:16px}
.phone-gallery img {
  width:30%;
  border-width:3px;
  border-radius:14px}
.monitor-art {
  max-width:320px;
  margin:10px auto}
.links {
  column-gap:22px}
.brand {
  font-size:.95rem}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important}
}

.support-grid > .card { padding: 28px; }

/* List Studio shares the homepage workspace visual instead of an oversized icon. */
.hero-workspace {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 40px;
}
.hero-workspace h1 {
  font-size: clamp(3rem, 5vw, 4.2rem);
}
.workspace-preview {
  width: 100%;
  max-width: 560px;
  margin: 0;
  justify-self: center;
}
.workspace-preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 24px 56px #0005;
}
.workspace-preview figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: .8rem;
  text-align: center;
}
@media (max-width: 900px) {
  .hero-workspace {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .workspace-preview {
    max-width: 420px;
  }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .hero-workspace {
    padding: 36px 0;
    gap: 24px;
  }
  .hero-workspace h1 {
    font-size: clamp(2.4rem, 4.4vw, 3.3rem);
  }
  .workspace-preview {
    max-width: 420px;
  }
  .workspace-preview img {
    width: auto;
    max-width: 100%;
    max-height: 280px;
    max-height: min(32svh, 280px);
    margin-inline: auto;
  }
}