/* Maximus web site. Shared by all pages. */

:root {
  --paper: #eceef1;      /* aluminium */
  --ink: #1c2026;        /* graphite */
  --ink-soft: #5a626c;   /* slate */
  --rule: #d2d6dc;
  --chrome: #dde0e5;
  --window: #fbfbfa;
  --accent: #446a7f;     /* Ethosoft blue-slate, as on ai.ethosoft.net */
  --accent-press: #37586a;
  --green: #28c840;      /* the macOS green button, only in the demo */
  --yellow: #febc2e;
  --red: #ff5f57;
  --focus: #2f6fdf;
  --wallpaper: linear-gradient(165deg, #1f4e62 0%, #4f8597 55%, #a9c6cc 100%);

  /* The system stack, as on ai.ethosoft.net: SF Pro on a Mac. No font files to load. */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: var(--sans);
  --text: var(--sans);

  --measure: 40rem;
  --wide: 68rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--text);
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

h1, h2, h3 {
  font-family: var(--display);
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 0.75rem;
}

h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1rem; }

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

/* ---------- Page frame ---------- */

.site-header,
.site-footer,
.frame,
.prose {
  width: min(100% - 2 * var(--gutter), var(--wide));
  margin-inline: auto;
}

/* Text pages: same left edge as the home page, short lines. */
.prose > * { max-width: var(--measure); }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font: 600 1.1875rem/1 var(--display);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand img { width: 2.1rem; height: 2.1rem; }

main > section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
main > section + section { border-top: 1px solid var(--rule); }

.section-lede {
  max-width: 34rem;
  text-wrap: pretty;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--ink-soft);
}

/* ---------- Buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.875rem;
  padding: 0.65rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: 600 1rem/1 var(--text);
  text-decoration: none;
  cursor: pointer;
}
.button:hover { background: rgba(28, 32, 38, 0.06); }

/* The main action in each place. */
.button-primary,
.button-buy {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.button-primary:hover,
.button-buy:hover { background: var(--accent-press); border-color: var(--accent-press); }

.button-small { min-height: 2.25rem; padding: 0.45rem 1rem; font-size: 0.9375rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }

/* ---------- Hero ---------- */

main > section.hero { padding-top: clamp(1.5rem, 5vw, 3.5rem); }

.hero h1 {
  max-width: 13em;
  font-size: clamp(2.6rem, 6.6vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.lede {
  max-width: 34em;
  margin-top: 1.25rem;
  font-size: clamp(1.125rem, 1.9vw, 1.3125rem);
  line-height: 1.5;
}

.meta {
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9375rem;
}

/* ---------- Demo ---------- */

.demo { margin-top: clamp(2.5rem, 6vw, 4rem); }

.demo-head {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

/* Two equal halves, and a thumb that slides under the chosen one. */
.mode {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: 999px;
  background: var(--chrome);
  font-size: 0.9375rem;
  font-weight: 600;
}
.mode::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--window);
  box-shadow: 0 1px 2px rgba(28, 32, 38, 0.18), 0 2px 8px -4px rgba(28, 32, 38, 0.25);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.mode:has(input[value="app"]:checked)::before { transform: translateX(100%); }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode label {
  position: relative;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  text-align: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: color 220ms ease;
}
.mode input:checked + label { color: var(--ink); }
.mode input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 1px; }

.screen {
  container-type: inline-size;
  --bar: 3.4%;
  --dock: 8.5%;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: clamp(8px, 1.4vw, 16px);
  background: #000;
  box-shadow: 0 0 0 1px rgba(28, 32, 38, 0.25), 0 30px 70px -30px rgba(23, 44, 58, 0.6);
  user-select: none;
  -webkit-user-select: none;
}

.space {
  position: absolute;
  inset: 0;
  transition: transform 520ms cubic-bezier(0.32, 0.72, 0, 1);
}
.space-desktop { background: var(--wallpaper); }
.space-full { background: #000; transform: translateX(100%); }
.screen[data-state="fullscreen"] .space-desktop { transform: translateX(-100%); }
.screen[data-state="fullscreen"] .space-full { transform: translateX(0); }

.menubar {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.4cqw;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: max(1.12cqw, 4px);
  line-height: 1;
  white-space: nowrap;
}
.mb-menus,
.mb-status { display: flex; align-items: center; gap: 1.55cqw; }
.mb-menus b { font-weight: 700; }
.mb-status { gap: 1.2cqw; }
.mb-icon { display: block; width: 1.45cqw; height: 1.45cqw; }

.dock {
  position: absolute;
  left: 50%;
  bottom: 0.8%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: 0.4cqw;
  padding: 0.4cqw 0.55cqw;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1.25cqw;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
}
.dock-item { position: relative; display: block; }
.dock-app { display: block; width: 3.3cqw; height: 3.3cqw; }
.dock-item.is-running::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.34cqw;
  width: 0.32cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(28, 32, 38, 0.75);
  translate: -50% 0;
}
.dock-sep { align-self: stretch; width: 1px; margin: 0.3cqw 0.2cqw; background: rgba(28, 32, 38, 0.22); }

.win {
  position: absolute;
  top: 17%;
  left: 15%;
  width: 54%;
  height: 58%;
  display: flex;
  flex-direction: column;
  border-radius: clamp(5px, 0.9vw, 11px);
  background: var(--window);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), 0 18px 40px -12px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  transition: top 420ms cubic-bezier(0.32, 0.72, 0, 1), left 420ms cubic-bezier(0.32, 0.72, 0, 1),
    width 420ms cubic-bezier(0.32, 0.72, 0, 1), height 420ms cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 420ms;
}
.screen[data-state="max"] .space-desktop .win-main {
  top: var(--bar);
  left: 0;
  width: 100%;
  height: calc(100% - var(--bar) - var(--dock));
  border-radius: 0;
}
.screen[data-state="zoom"] .space-desktop .win-main {
  top: calc(var(--bar) + 2%);
  left: 15%;
  width: 58%;
  height: 79%;
}
.win-back {
  top: 24%;
  left: 52%;
  width: 36%;
  height: 46%;
  opacity: 0.92;
}
.space-full .win {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.72cqw;
  height: max(2.6cqw, 10px);
  padding: 0 1.05cqw;
  background: var(--chrome);
  border-bottom: 1px solid #c9cdd3;
  cursor: default;
}
.light {
  position: relative;
  width: max(1.05cqw, 5px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 0;
  padding: 0;
  flex: 0 0 auto;
}
.light-red { background: var(--red); }
.light-yellow { background: var(--yellow); }
.light-off { background: #c9cdd3; }
.light-green { background: var(--green); transition: filter 90ms ease-out; }
.light.is-pressed { filter: brightness(0.78); }

.win-title {
  flex: 1;
  text-align: center;
  font-size: max(1.1cqw, 5px);
  font-weight: 600;
  color: #5f666f;
  margin-right: 10%;
  white-space: nowrap;
  overflow: hidden;
}

.win-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.win-back .win-body { padding: 3cqw; }
.win-back .line { height: 1.4cqw; margin-bottom: 1.4cqw; border-radius: 99px; background: #dcdfe3; }
.win-back .line:nth-child(2) { width: 70%; }
.win-back .line:nth-child(3) { width: 85%; }

/* A file window with dummy files. Sizes are in cqw of the screen, so a bigger
   window shows more files, not bigger ones. */
.finder {
  display: flex;
  font-size: max(1.05cqw, 5px);
  line-height: 1.25;
  color: #2b3138;
}
.f-side {
  flex: none;
  width: 12.5cqw;
  display: flex;
  flex-direction: column;
  gap: 0.15cqw;
  padding: 1.3cqw 0.8cqw;
  background: #eef0f2;
  border-right: 1px solid #dcdfe4;
}
.f-head { margin: 0 0 0.4cqw 0.45cqw; color: #8b919a; font-weight: 600; font-size: 0.9em; }
.f-item {
  display: flex;
  align-items: center;
  gap: 0.6cqw;
  padding: 0.35cqw 0.45cqw;
  border-radius: 0.5cqw;
  white-space: nowrap;
}
.f-item i {
  flex: none;
  width: 1.05cqw;
  aspect-ratio: 1;
  border: 0.16cqw solid #3d84d6;
  border-radius: 0.3cqw;
}
.f-item.is-selected { background: rgba(28, 32, 38, 0.09); }

.f-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8.6cqw, 1fr));
  align-content: start;
  gap: 1.5cqw 0.4cqw;
  padding: 1.8cqw 1.2cqw;
}
.f-file { display: flex; flex-direction: column; align-items: center; gap: 0.5cqw; min-width: 0; }
.f-icon { display: flex; align-items: flex-end; justify-content: center; width: 5.4cqw; height: 4.4cqw; }
.f-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f-folder { width: 100%; height: auto; }
.f-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0.25cqw solid #fff;
  border-radius: 0.25cqw;
  box-shadow: 0 0.15cqw 0.4cqw rgba(0, 0, 0, 0.25);
}
.f-beach { background: linear-gradient(180deg, #8fd0f2 0 45%, #2f9fcf 45% 66%, #ecd7a6 66%); }
.f-lake { background: linear-gradient(180deg, #c9dfea 0 38%, #5f8a5a 38% 55%, #3b6f8f 55%); }
.f-garden { background: radial-gradient(circle at 30% 40%, #f4c04e 0 12%, transparent 13%), linear-gradient(180deg, #a8d58a 0 50%, #4f8d3f 50%); }
.f-logo { background: radial-gradient(circle at 50% 50%, #28c840 0 24%, #f7f7f5 25%); }
.f-mountain { background: linear-gradient(160deg, transparent 0 40%, #6b7f99 40% 52%, transparent 52%), linear-gradient(200deg, #e6eef6 0 30%, #8da4bf 30% 58%, #4c6b52 58%); }
.f-doc {
  position: relative;
  width: 3.6cqw;
  height: 4.4cqw;
  border: 1px solid #d2d6dc;
  border-radius: 0.2cqw;
  background: linear-gradient(225deg, transparent 0 0.9cqw, #e3e6ea 0.9cqw 1.25cqw, #fff 1.25cqw);
  box-shadow: 0 0.12cqw 0.3cqw rgba(0, 0, 0, 0.12);
}
.f-doc b {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7cqw;
  margin: 0 auto;
  width: fit-content;
  padding: 0.1cqw 0.35cqw;
  border-radius: 0.2cqw;
  color: #fff;
  font-size: max(0.72cqw, 4px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.f-pdf b { background: #d9483b; }
.f-xls b { background: #2f8f4e; }
.f-docx b { background: #2f6fdf; }
.f-ppt b { background: #d9792b; }
.f-txt b { background: #8b919a; }

/* The explanation: a small bubble that floats above the Dock and changes with each step. */
.caption {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: calc(var(--dock) + 2.5%);
  translate: -50% 0;
  width: max-content;
  /* Wide enough on a phone to stay at two lines. */
  max-width: min(92%, max(48cqw, 290px));
  margin: 0;
  padding: 0.55em 0.95em;
  border-radius: 0.9em;
  background: rgba(28, 32, 38, 0.9);
  color: #fff;
  font: 500 clamp(10px, 1.4cqw, 15px)/1.3 var(--text);
  text-align: center;
  box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  transition: opacity 200ms ease, transform 200ms ease;
}
.caption.is-changing { opacity: 0; transform: translateY(0.4cqw); }

/* The pointer. It moves in % of the screen, so it scales with it. The tip is the hot spot. */
.pointer {
  position: absolute;
  z-index: 5;
  left: 80%;
  top: 60%;
  width: clamp(12px, 1.6vw, 19px);
  height: auto;
  pointer-events: none;
  transform-origin: 8% 5%;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35));
  transition:
    left var(--move, 0ms) cubic-bezier(0.45, 0.05, 0.25, 1),
    top var(--move, 0ms) cubic-bezier(0.45, 0.05, 0.25, 1),
    transform 90ms ease-out;
}
.pointer.is-pressed { transform: scale(0.85); }
.click-ring {
  position: absolute;
  z-index: 4;
  width: clamp(18px, 2.6vw, 30px);
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
  pointer-events: none;
}
/* Restart: jump to the first frame with no transitions. */
.screen.no-motion .space,
.screen.no-motion .win { transition: none; }

/* ---------- Notes ---------- */

.notes {
  max-width: var(--measure);
  margin: 1.5rem 0 0;
  padding-left: 1.1rem;
  color: var(--ink-soft);
}
.notes li { margin: 0.35rem 0; padding-left: 0.2rem; }

/* ---------- Price ---------- */

.price {
  display: grid;
  grid-template-columns: max-content minmax(0, 36rem);
  justify-content: start;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
.price-amount {
  margin: 0;
  font: 600 clamp(4.5rem, 13vw, 8.5rem)/0.85 var(--display);
  letter-spacing: -0.045em;
}
.price h2 { margin-top: 0.15rem; }
.small { font-size: 0.9375rem; color: var(--ink-soft); }
.price .small { margin-top: 1.25rem; }

/* ---------- Questions ---------- */

.faq { max-width: 44rem; margin-top: 1.25rem; }
details { border-bottom: 1px solid var(--rule); }
details:first-of-type { border-top: 1px solid var(--rule); }
summary {
  padding: 1.05rem 0;
  font-weight: 650;
  cursor: pointer;
  list-style-position: outside;
}
details p { color: var(--ink-soft); }

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.site-footer p { margin: 0; margin-right: auto; }

/* ---------- Thank-you page: the license key ---------- */

.key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0.75rem;
}
.key {
  display: block;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--window);
  font: 600 clamp(1.05rem, 3.4vw, 1.4rem)/1.2 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
  user-select: all;
  -webkit-user-select: all;
  overflow-wrap: anywhere;
}
.steps { padding-left: 1.25rem; }
.steps li { margin: 0.75rem 0; padding-left: 0.25rem; }
.steps li .button { margin-right: 0.5rem; }

/* ---------- Get your key: the email form ---------- */

.field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin: 1.5rem 0 0.75rem;
}
.field { display: grid; gap: 0.35rem; flex: 1 1 16rem; font-weight: 600; font-size: 0.9375rem; }
.field input {
  min-height: 2.75rem;
  padding: 0.5rem 0.85rem;
  border: 1px solid #b9bec6;
  border-radius: 10px;
  background: var(--window);
  color: var(--ink);
  font: 400 1rem/1.4 var(--text);
}
.field input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.notice { min-height: 1.6em; font-weight: 600; }

[hidden] { display: none !important; }

/* ---------- Legal pages ---------- */

.legal { padding-top: 1.5rem; padding-bottom: 4rem; }
.legal > * { max-width: var(--measure); }
.legal h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 600; letter-spacing: -0.035em; margin-bottom: 0.5rem; }
.legal h2 { font-size: 1.3rem; margin: 2rem 0 0.5rem; }
.legal .updated { color: var(--ink-soft); margin-bottom: 2rem; }

/* ---------- Small screens ---------- */

@media (max-width: 56rem) {
  .price { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

@media (max-width: 40rem) {
  .win-title { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .space, .win, .caption { transition: none; }
  .mode::before, .mode label { transition: none; }
}