/* morphscreen.com in MorphScreenUI (roadmap N1): black throughout, words
 * white or grey, each pastel on the mark beside them. Loaded after
 * morphscreenui.css, which brings the tokens, the faces and the parts. */

html {
  background-color: var(--msui-ground);
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background-color: var(--msui-ground);
  color: var(--msui-text-2);
  font-family: var(--msui-font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: var(--msui-text);
  text-decoration-color: var(--msui-edge);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
a:hover {
  text-decoration-color: var(--msui-text);
}
code,
pre {
  font-family: var(--msui-font-mono);
}
h1,
h2,
h3 {
  color: var(--msui-text);
  text-wrap: balance;
  margin: 0;
}
p {
  margin: 0;
  text-wrap: pretty;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: var(--msui-r-control);
  background-color: var(--msui-text);
  color: var(--msui-on-light);
  font-weight: 600;
}
.skip:focus {
  top: 12px;
}

.wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}

/* ---- type ---------------------------------------------------------------- */

.display {
  font-size: clamp(40px, 22px + 5.2vw, 76px);
  line-height: 1;
  font-weight: var(--msui-display-weight);
  letter-spacing: var(--msui-display-tracking);
  font-stretch: 112%;
}
.title1 {
  font-size: var(--msui-title1-size);
  line-height: var(--msui-title1-line);
  font-weight: var(--msui-title1-weight);
  letter-spacing: var(--msui-title1-tracking);
  font-stretch: calc(var(--msui-title1-width) * 1%);
}
.title {
  font-size: var(--msui-title2-size);
  line-height: var(--msui-title2-line);
  font-weight: var(--msui-title2-weight);
  letter-spacing: var(--msui-title2-tracking);
  font-stretch: calc(var(--msui-title2-width) * 1%);
}
.lead {
  font-size: clamp(17px, 15px + 0.45vw, 20px);
  line-height: 1.55;
  max-width: 60ch;
}
.small {
  font-size: var(--msui-small-size);
  line-height: var(--msui-small-line);
}
.caption {
  font-size: var(--msui-caption-size);
  line-height: 1.5;
  color: var(--msui-text-3);
}

/* ---- buttons: capsules, the only thing that gets them ------------------- */

.btn {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background-color: var(--msui-control);
  color: var(--msui-text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--msui-dur-fast) var(--msui-ease);
}
.btn:hover {
  background-color: var(--msui-pressed);
}
.btn--primary {
  background-color: var(--msui-text);
  color: var(--msui-on-light);
}
.btn--primary:hover {
  background-color: #ffffff;
}
.btn--small {
  min-height: 36px;
  padding: 0 14px;
  font-size: 14px;
}

/* ---- the header: a capsule that floats over the page -------------------- */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
}
.bar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 0 8px 0 18px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  color: var(--msui-text);
  font-weight: 650;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand svg {
  width: 22px;
  height: 16px;
}
.bar__links {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bar__links a,
.bar__signin {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--msui-text-2);
  font-size: 14px;
  font-weight: 550;
  text-decoration: none;
}
.bar__links a:hover,
.bar__signin:hover,
.bar__links a[aria-current="page"] {
  color: var(--msui-text);
  background-color: var(--msui-glass-pill);
}
@media (max-width: 860px) {
  .bar__links li:not(.bar__keep) {
    display: none;
  }
}
@media (max-width: 420px) {
  .bar__signin {
    display: none;
  }
  .bar {
    padding-left: 14px;
  }
}

main {
  display: block;
}

/* ---- the first screen: the promise over a real answer streaming --------- */

/* The stage runs under the floating header, edge to edge, a screen tall; the
 * video of the answer sits on its right, darkened toward the words on the left
 * and toward the facts along the bottom. */
.stage {
  --head: calc(max(12px, env(safe-area-inset-top, 0px)) + 52px);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(640px, 100svh);
  margin-top: calc(-1 * var(--head));
  padding-top: var(--head);
  overflow: hidden;
}
.stage__plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--msui-ground);
}
.stage__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 74% 0;
}
.stage__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--msui-ground) 0%, color-mix(in srgb, var(--msui-ground) 92%, transparent) 30%, color-mix(in srgb, var(--msui-ground) 55%, transparent) 50%, color-mix(in srgb, var(--msui-ground) 12%, transparent) 70%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--msui-ground) 70%, transparent) 0%, transparent 15%, transparent 62%, color-mix(in srgb, var(--msui-ground) 88%, transparent) 84%, var(--msui-ground) 100%);
}
.stage__body {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 40px 28px;
}
.stage__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 680px;
  min-width: 0;
}
.stage__title {
  font-size: clamp(40px, 1.1vw + 3.6vh, 72px);
  line-height: 1.03;
  font-weight: var(--msui-display-weight);
  letter-spacing: var(--msui-display-tracking);
  font-stretch: 112%;
}
.stage__title span {
  display: block;
  white-space: nowrap;
}
.stage__sub {
  max-width: 48ch;
  color: var(--msui-text-2);
  font-size: clamp(17px, 0.4vw + 1vh + 8px, 20px);
  line-height: 1.55;
}
.stage__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
}
.btn--large {
  min-height: 52px;
  padding: 0 28px;
  font-size: 16px;
}
.stage__ghost {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--msui-text);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.stage__ghost:hover {
  text-decoration: underline;
}
/* The install line: the command, and a button that copies it. */
.install {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  padding: 6px 6px 6px 16px;
  border-radius: var(--msui-r-control);
  background-color: color-mix(in srgb, var(--msui-raised) 90%, transparent);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
}
.install__cmd {
  min-width: 0;
  overflow: hidden;
  color: var(--msui-text);
  font-size: 14.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.install__sign {
  color: var(--msui-text-3);
}
.install__copy {
  flex: none;
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background-color: var(--msui-control);
  color: var(--msui-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.install__copy:hover {
  background-color: var(--msui-pressed);
}
.stage__note {
  max-width: 54ch;
  color: var(--msui-text-3);
  font-size: 14px;
  line-height: 1.55;
}
.stage__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 28px;
}
.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 32px;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--msui-rule);
  list-style: none;
}
.strip a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--msui-text-3);
  font-size: 13.5px;
  line-height: 1.45;
  text-decoration: none;
}
.strip a:hover span {
  color: var(--msui-text-2);
}
.strip strong {
  color: var(--msui-text);
  font-size: 22px;
  font-weight: 650;
  line-height: 1.2;
}
.stage__behind {
  color: var(--msui-text-3);
  font-size: 12.5px;
}
@media (max-width: 860px) {
  .strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Taller than wide: the words over the answer's darkened side, read top to bottom. */
@media (max-aspect-ratio: 11/10) {
  /* The answer shows across the top; behind the words it's all but solid. */
  .stage__video {
    object-position: 76% 0;
  }
  .stage__plate::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--msui-ground) 62%, transparent) 0%, color-mix(in srgb, var(--msui-ground) 50%, transparent) 8%, color-mix(in srgb, var(--msui-ground) 93%, transparent) 15%, var(--msui-ground) 21%);
  }
  .stage__body {
    align-items: flex-end;
    padding-block: 96px 24px;
  }
}
@media (max-width: 520px) {
  .stage__title span {
    display: inline;
    white-space: normal;
  }
  .stage__ctas .btn--large {
    flex: 1 1 auto;
  }
}
/* On arrival the headline is there at once (it's what the page is measured by
 * as it loads), and what follows rises into place under it, in reading order;
 * the facts fade in. */
@media (prefers-reduced-motion: no-preference) {
  .stage__copy > :not(:first-child) {
    animation: stage-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .stage__copy > :nth-child(2) {
    animation-delay: 0.04s;
  }
  .stage__copy > :nth-child(3) {
    animation-delay: 0.12s;
  }
  .stage__copy > :nth-child(n + 4) {
    animation-delay: 0.2s;
  }
  .stage__foot {
    animation: stage-fade 1.1s ease 0.34s both;
  }
}
@keyframes stage-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes stage-fade {
  from {
    opacity: 0;
  }
}

/* ---- sections ------------------------------------------------------------ */

.section {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-block: 64px;
  border-top: 1px solid var(--msui-rule);
}
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 40px;
}
.section__note {
  max-width: 62ch;
  color: var(--msui-text-2);
}
.more {
  font-size: 15px;
}

/* ---- the landing page's sections (redrawn 2026-10-28) -------------------- */

/* The landing page's sections under its first screen are laid out and
   painted only as they come near, so the first screen never waits on them. */
main > .wrap > .section {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* A heading in two tones: the second line quieter. Each line rises from a
   mask of its own when its section arrives (the motion block below). */
.headline {
  margin: 0;
  font-size: clamp(30px, 17px + 2.7vw, 54px);
  line-height: 1.05;
  font-weight: 640;
  letter-spacing: -0.035em;
  font-stretch: 104%;
  text-wrap: balance;
}
/* Clipped by a path rather than overflow, with room for descenders: the
   line waiting below it stays out of sight without making a scroll box. */
.headline .mask {
  display: block;
  clip-path: inset(-0.3em -0.5em -0.16em -0.5em);
}
.headline .line {
  display: block;
}
.headline .line--soft {
  color: var(--msui-text-3);
}

/* One answer as text and as drawn. Without JavaScript the drawn one shows;
   with it, the text lies on top and a trail wipes it away (site.js). */
.morph__stage {
  position: relative;
  height: clamp(440px, 72vh, 660px);
  contain: paint;
  border-radius: 14px;
  background-color: var(--msui-base);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
  touch-action: pan-y;
}
/* A window onto the top of the answer: painted inside its box only. */
.morph__layer {
  position: absolute;
  inset: 0;
  contain: paint;
  padding: clamp(20px, 3.4vw, 44px) max(20px, calc((100% - 780px) / 2));
}
.morph__layer--text {
  display: none;
}
.morph.is-live .morph__layer--text {
  display: block;
}
.morph.is-live .morph__layer--ui {
  -webkit-mask-image: linear-gradient(transparent, transparent);
  mask-image: linear-gradient(transparent, transparent);
}
.morph.is-live.is-drawn .morph__layer--text {
  visibility: hidden;
}
.morph.is-live.is-drawn .morph__layer--ui {
  -webkit-mask-image: none;
  mask-image: none;
}
.morph__stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 112px;
  background: linear-gradient(transparent, var(--msui-base));
  pointer-events: none;
}
.morph__toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
}
.src {
  margin: 0;
  font-family: var(--msui-font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--msui-text);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.src__tag {
  color: var(--msui-text-3);
}

/* The measurements: tall cards, each in its pastel, two figures split by a
   rule, and the measurement drawn on a dark plate over stacked sheets. */
.results {
  gap: 36px;
}
.results__head {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.results__lead {
  max-width: 62ch;
  margin: 0;
  color: var(--msui-text-2);
}
.rule {
  display: block;
  width: min(220px, 40%);
  height: 1px;
  background-color: var(--msui-edge);
}
.results__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.result {
  --card: var(--msui-text);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px 20px 20px;
  border-radius: 12px;
  background-color: var(--card);
  color: var(--msui-on-light);
  transition: transform 320ms var(--msui-ease);
}
.result--mint { --card: var(--msui-mint); }
.result--sky { --card: var(--msui-sky); }
.result--lilac { --card: var(--msui-lilac); }
.result--butter { --card: var(--msui-butter); }
.result__top {
  display: grid;
  gap: 4px;
}
.result__name {
  margin: 0;
  color: inherit;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 660;
  letter-spacing: -0.015em;
}
.result__what {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}
.result__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.result__stat {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
.result__stat + .result__stat {
  padding-left: 14px;
  border-left: 1px solid rgb(5 5 6 / 0.22);
}
/* OpenUI's figure quieter by weight, not by fading: full ink keeps its contrast. */
.result__stat--them .result__n {
  font-weight: 380;
}
.result__n {
  font-size: clamp(26px, 14px + 1.5vw, 36px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
  font-stretch: 88%;
  white-space: nowrap;
}
.result__who {
  font-size: 13px;
}
.result__media {
  position: relative;
  margin-top: auto;
  padding-top: 12px;
}
.sheet {
  position: absolute;
  top: 6px;
  left: 10px;
  right: 10px;
  height: 48px;
  border-radius: 8px;
  background-color: rgb(5 5 6 / 0.16);
  transition: transform 360ms var(--msui-ease);
}
.sheet--2 {
  top: 0;
  left: 20px;
  right: 20px;
  background-color: rgb(5 5 6 / 0.09);
}
.result:hover {
  transform: translateY(-3px);
}
.result:hover .sheet--1 {
  transform: translateY(-3px) rotate(-1.4deg);
}
.result:hover .sheet--2 {
  transform: translateY(-7px) rotate(1.8deg);
}
.plate {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background-color: var(--msui-ground);
  color: var(--msui-text);
}
.plate__row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.plate__who {
  color: var(--msui-text-2);
}
.plate__v {
  color: var(--msui-text);
}
.dots {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(23, minmax(0, 1fr));
  gap: 2px;
}
.dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--msui-control);
}
.dots i.on {
  background-color: var(--card);
}
.plate__row + .plate__row .dots i.on,
.meter__fill {
  background-color: var(--msui-text-3);
}
.meter {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--msui-control);
}
.meter__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transform-origin: left;
  transition: transform 900ms var(--msui-ease) 450ms;
}
.meter--ours .meter__fill {
  background-color: var(--card);
}
.meter__fill--1 { width: 5%; } .meter__fill--2 { width: 10%; } .meter__fill--3 { width: 15%; } .meter__fill--4 { width: 20%; }
.meter__fill--5 { width: 25%; } .meter__fill--6 { width: 30%; } .meter__fill--7 { width: 35%; } .meter__fill--8 { width: 40%; }
.meter__fill--9 { width: 45%; } .meter__fill--10 { width: 50%; } .meter__fill--11 { width: 55%; } .meter__fill--12 { width: 60%; }
.meter__fill--13 { width: 65%; } .meter__fill--14 { width: 70%; } .meter__fill--15 { width: 75%; } .meter__fill--16 { width: 80%; }
.meter__fill--17 { width: 85%; } .meter__fill--18 { width: 90%; } .meter__fill--19 { width: 95%; } .meter__fill--20 { width: 100%; }
.result__how {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.results__more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
}
.results__link {
  color: var(--msui-text-2);
  font-size: 15px;
}
@media (max-width: 1100px) {
  .results__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .results__cards {
    grid-template-columns: minmax(0, 1fr);
  }
  .results__more .btn {
    white-space: normal;
    text-align: center;
    padding-block: 10px;
  }
}

/* The call, and the same answer streaming beside it. */
.live {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 28px 48px;
  align-items: start;
}
.live__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
}
.live__steps {
  display: grid;
  gap: 14px;
  margin: 0;
  padding-left: 1.2em;
  color: var(--msui-text-2);
}
.live__steps strong {
  color: var(--msui-text);
  font-weight: 600;
}
.live__screen {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 0;
}
.live__frame {
  display: block;
  width: 100%;
  height: clamp(460px, 70vh, 640px);
  border: 0;
  border-radius: 14px;
  background-color: var(--msui-base);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
}
.live__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.live__note {
  color: var(--msui-text-2);
}
.live code,
.prose code,
.faq code {
  font-size: 0.9em;
  color: var(--msui-text);
}
.code {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  border-radius: var(--msui-r-card);
  background-color: var(--msui-base);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
  color: var(--msui-text);
  font-size: 13px;
  line-height: 1.6;
}
@media (max-width: 960px) {
  .live {
    grid-template-columns: minmax(0, 1fr);
  }
  .live__screen {
    position: static;
  }
  .live__frame {
    height: 520px;
  }
}

/* The families: pick one, see it drawn. A pair of radios the CSS reads, so
   it works without JavaScript. */
.gallery__body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px 40px;
  align-items: start;
}
.picks {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.picks input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.pick {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--msui-text-2);
  font-weight: 560;
  cursor: pointer;
  transition: background-color var(--msui-dur-fast) var(--msui-ease), color var(--msui-dur-fast) var(--msui-ease);
}
.pick:hover {
  background-color: var(--msui-base);
  color: var(--msui-text);
}
.picks input:checked + .pick {
  background-color: var(--msui-raised);
  color: var(--msui-text);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
}
.picks input:focus-visible + .pick {
  outline: 2px solid var(--msui-sky);
  outline-offset: 2px;
}
.pick__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: var(--mark, var(--msui-text));
}
.pick__dot[data-colour="sky"] { --mark: var(--msui-sky); }
.pick__dot[data-colour="peach"] { --mark: var(--msui-peach); }
.pick__dot[data-colour="aqua"] { --mark: var(--msui-aqua); }
.pick__dot[data-colour="butter"] { --mark: var(--msui-butter); }
.pick__dot[data-colour="rose"] { --mark: var(--msui-rose); }
.pick__dot[data-colour="lime"] { --mark: var(--msui-lime); }
.pick__dot[data-colour="lilac"] { --mark: var(--msui-lilac); }
.pick__dot[data-colour="mint"] { --mark: var(--msui-mint); }
.pick__n {
  color: var(--msui-text-3);
  font-size: 13px;
}
.fam {
  display: none;
  gap: 16px;
  min-width: 0;
}
body:has(#fam-core:checked) .fam[data-fam="core"],
body:has(#fam-data:checked) .fam[data-fam="data"],
body:has(#fam-commerce:checked) .fam[data-fam="commerce"],
body:has(#fam-device:checked) .fam[data-fam="device"],
body:has(#fam-docs:checked) .fam[data-fam="docs"],
body:has(#fam-media:checked) .fam[data-fam="media"],
body:has(#fam-inputs:checked) .fam[data-fam="inputs"],
body:has(#fam-interactive:checked) .fam[data-fam="interactive"],
body:has(#fam-scheduling:checked) .fam[data-fam="scheduling"] {
  display: grid;
}
@supports not selector(:has(*)) {
  .fam {
    display: grid;
  }
}
.fam__about {
  max-width: 62ch;
  margin: 0;
  color: var(--msui-text-2);
}
.fam__preview {
  display: grid;
  align-content: center;
  min-height: 340px;
  min-width: 0;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 14px;
  background-color: var(--msui-base);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
}
.fam__parts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.fam__parts code {
  padding: 2px 7px;
  border-radius: 6px;
  background-color: var(--msui-raised);
  color: var(--msui-text-2);
  font-size: 12.5px;
  line-height: 1.6;
}
@media (max-width: 960px) {
  .gallery__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .picks {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
  }
  .pick {
    grid-template-columns: 9px auto auto;
    padding: 8px 12px;
    box-shadow: inset 0 0 0 1px var(--msui-hairline);
  }
}

/* Questions beside their heading; the way in, last. */
.section.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px 48px;
  align-items: start;
}
.section.close {
  align-items: center;
  gap: 30px;
  padding-block: 96px 112px;
  text-align: center;
}
.close__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}
@media (max-width: 960px) {
  .section.faq {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* How a section arrives, once: its heading's lines rise, its notes fade up,
   the rule draws, the cards follow 120 ms apart and the bars grow. Only when
   motion is welcome and the script is there to say a section has arrived. */
@media (prefers-reduced-motion: no-preference) {
  html.motion [data-reveal] .headline .line {
    transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.motion [data-reveal] .headline .mask + .mask .line {
    transition-delay: 90ms;
  }
  html.motion [data-reveal]:not(.is-in) .headline .line {
    transform: translateY(125%);
  }
  html.motion [data-reveal] .fade,
  html.motion [data-reveal] .results__cards > li,
  html.motion [data-reveal] .plans > .plan {
    transition: opacity 700ms cubic-bezier(0.25, 0.8, 0.28, 1) 260ms, transform 700ms cubic-bezier(0.25, 0.8, 0.28, 1) 260ms;
  }
  html.motion [data-reveal]:not(.is-in) .fade,
  html.motion [data-reveal]:not(.is-in) .results__cards > li,
  html.motion [data-reveal]:not(.is-in) .plans > .plan {
    opacity: 0;
    transform: translateY(18px);
  }
  html.motion [data-reveal] .results__cards > li:nth-child(1),
  html.motion [data-reveal] .plans > .plan:nth-child(1) { transition-delay: 380ms; }
  html.motion [data-reveal] .results__cards > li:nth-child(2),
  html.motion [data-reveal] .plans > .plan:nth-child(2) { transition-delay: 500ms; }
  html.motion [data-reveal] .results__cards > li:nth-child(3),
  html.motion [data-reveal] .plans > .plan:nth-child(3) { transition-delay: 620ms; }
  html.motion [data-reveal] .results__cards > li:nth-child(4) { transition-delay: 740ms; }
  html.motion [data-reveal].is-in .results__cards > li {
    transition: opacity 700ms cubic-bezier(0.25, 0.8, 0.28, 1), transform 320ms var(--msui-ease);
  }
  html.motion [data-reveal].is-in .results__cards > li:not(:hover) {
    transition: opacity 700ms cubic-bezier(0.25, 0.8, 0.28, 1), transform 700ms cubic-bezier(0.25, 0.8, 0.28, 1);
  }
  html.motion [data-reveal] .rule {
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1) 300ms;
  }
  html.motion [data-reveal]:not(.is-in) .rule {
    transform: scaleX(0);
  }
  html.motion [data-reveal]:not(.is-in) .meter__fill {
    transform: scaleX(0);
  }
  body:has(.picks input:checked) .fam {
    animation: fam-in 420ms cubic-bezier(0.25, 0.8, 0.28, 1);
  }
}
@keyframes fam-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Pricing. */
.currency {
  display: inline-flex;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background-color: var(--msui-base);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
}
.currency input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.currency label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--msui-text-2);
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}
.currency input:checked + label {
  background-color: var(--msui-control);
  color: var(--msui-text);
}
.currency input:focus-visible + label {
  outline: 2px solid var(--msui-sky);
  outline-offset: 2px;
}
/* Dollars and monthly until a switch says otherwise. */
.switches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cur-inr,
.cyc-year {
  display: none;
}
body:has(#cur-inr:checked) .cur-inr,
body:has(#cyc-year:checked) .cyc-year {
  display: inline;
}
body:has(#cur-inr:checked) .cur-usd,
body:has(#cyc-year:checked) .cyc-month {
  display: none;
}
.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  border-radius: var(--msui-r-panel);
  background-color: var(--msui-base);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
}
.plan--lead {
  background-color: var(--msui-raised);
  box-shadow: inset 0 0 0 1px var(--msui-edge);
}
.plan__name {
  font-size: var(--msui-headline-size);
  font-weight: 620;
}
.plan__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.plan__figure {
  color: var(--msui-text);
  font-size: 44px;
  line-height: 1;
  font-weight: 620;
  font-stretch: 80%;
  font-variant-numeric: tabular-nums;
}
.plan__per {
  color: var(--msui-text-3);
  font-size: 15px;
}
.plan__lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.5;
}
.plan__lines li {
  position: relative;
  padding-left: 15px;
}
.plan__lines li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--msui-text-3);
}
.fine {
  max-width: 80ch;
  color: var(--msui-text-3);
}
@media (max-width: 960px) {
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Booking a demo: Calendly's scheduler, its own card on our ground, as tall as it needs. */
.booking {
  margin-block: 0 16px;
}
.booking__frame {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  /* Calendly's page is light and transparent; a frame whose scheme differs
     from its page's is painted white, so the frame takes the page's scheme. */
  color-scheme: light;
}
@media (max-width: 760px) {
  .booking__frame {
    height: 1080px;
  }
}

/* Questions. */
.faq__list {
  display: flex;
  flex-direction: column;
  max-width: 80ch;
}
.faq details {
  border-top: 1px solid var(--msui-hairline);
}
.faq details:last-child {
  border-bottom: 1px solid var(--msui-hairline);
}
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 18px;
  color: var(--msui-text);
  font-size: 17px;
  font-weight: 560;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 0.45em;
  border-right: 1.5px solid var(--msui-text-3);
  border-bottom: 1.5px solid var(--msui-text-3);
  transform: rotate(45deg);
  transition: transform var(--msui-dur-fast) var(--msui-ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq details p {
  padding-bottom: 20px;
  max-width: 70ch;
}

/* ---- pages of text: pricing's details, the comparison, the legal pages --- */

.page-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 64px 32px;
  max-width: 72ch;
}
.prose {
  max-width: 72ch;
  padding-bottom: 72px;
}
.section.prose {
  max-width: none;
}
.prose > h2 {
  margin: 2em 0 0.5em;
  padding-top: 1.2em;
  border-top: 1px solid var(--msui-rule);
  font-size: 19px;
  line-height: 1.35;
  font-weight: 620;
}
.prose > h2:first-child {
  margin-top: 0;
}
.prose p,
.prose li {
  margin: 0.55em 0;
  max-width: 72ch;
}
.prose ul {
  padding-left: 1.2em;
}
.prose li::marker {
  color: var(--msui-text-3);
}
.prose strong {
  color: var(--msui-text);
  font-weight: 600;
}
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 14px 32px;
  margin: 0 0 32px;
}
.facts dt {
  color: var(--msui-text-3);
}
.facts dd {
  margin: 0;
  color: var(--msui-text);
}
@media (max-width: 520px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .facts dd + dt {
    margin-top: 14px;
  }
}

.table-scroll {
  overflow-x: auto;
  border-radius: var(--msui-r-card);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
}
.limits,
.board {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.limits th,
.limits td,
.board th,
.board td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--msui-hairline);
  text-align: left;
  vertical-align: top;
}
.limits tbody tr:last-child > *,
.board tbody tr:last-child > * {
  border-bottom: 0;
}
.limits thead th,
.board thead th {
  background-color: var(--msui-base);
  color: var(--msui-text);
  font-size: 14px;
  font-weight: 600;
}
.limits tbody th,
.board tbody th {
  color: var(--msui-text);
  font-weight: 500;
}
.limits {
  min-width: 620px;
}
.subs td {
  min-width: 18ch;
}
.limits th,
.board th {
  text-wrap: balance;
}
.nb {
  white-space: nowrap;
}
.board {
  min-width: 1180px;
  font-size: 14px;
}
.board tbody th {
  min-width: 30ch;
}
.board td.msui-num {
  min-width: 24ch;
}
.board td.how {
  color: var(--msui-text-3);
  font-size: 13px;
  min-width: 280px;
}
.runs {
  min-width: 860px;
}
.runs tbody th {
  min-width: 24ch;
}
.runs td.msui-num {
  min-width: 12ch;
}
.reasons {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 80ch;
}
.reason {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reason__title {
  font-size: var(--msui-headline-size);
  font-weight: 620;
}
.reason__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 0;
  padding-left: 1.2em;
  color: var(--msui-text-3);
  font-size: 14px;
}
.run-model {
  display: block;
  color: var(--msui-text-3);
  font-size: 13px;
  font-weight: 400;
}
.ahead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: var(--msui-text);
}
.ahead__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--mark, var(--msui-edge));
}
.ahead__dot[data-tone="mint"] { --mark: var(--msui-mint); }
.ahead__dot[data-tone="rose"] { --mark: var(--msui-rose); }

/* ---- the foot -------------------------------------------------------------- */

.foot {
  margin-top: 32px;
  padding-block: 48px max(40px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--msui-rule);
  font-size: 14px;
}
.foot__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.foot__cols h2 {
  margin-bottom: 12px;
  color: var(--msui-text-3);
  font-size: 13px;
  font-weight: 550;
}
.foot ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot a {
  color: var(--msui-text-2);
  text-decoration: none;
}
.foot a:hover {
  color: var(--msui-text);
}
.foot__who {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--msui-text-3);
}
.foot__who .brand {
  margin: 0;
}
.linkish {
  padding: 0;
  border: 0;
  background: none;
  color: var(--msui-text-2);
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.linkish:hover {
  color: var(--msui-text);
}
@media (max-width: 860px) {
  .foot__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot__who {
    grid-column: 1 / -1;
  }
}

/* ---- asking before Clarity records (V5) ---------------------------------- */

.consent {
  position: fixed;
  z-index: 30;
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  max-width: 720px;
  margin-inline: auto;
  padding: 16px 16px 16px 22px;
  border-radius: 22px;
  background-color: var(--msui-raised);
  box-shadow: inset 0 0 0 1px var(--msui-edge), var(--msui-shadow-lift);
}
.consent[hidden] {
  display: none;
}
.consent p {
  flex: 1 1 320px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
}
.consent__actions {
  display: flex;
  gap: 8px;
}

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

/* ---- /demo: two renderers side by side ------------------------------------ */

.demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 48px;
}
.demo__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.demo__briefs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background-color: var(--msui-base);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
}
.demo__briefs button {
  min-height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--msui-text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 550;
  cursor: pointer;
}
.demo__briefs button[aria-checked="true"] {
  background-color: var(--msui-control);
  color: var(--msui-text);
}
.demo__panes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.demo__pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  min-width: 0;
}
.demo__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.demo__name {
  color: var(--msui-text);
  font-weight: 620;
}
.demo__head .small {
  color: var(--msui-text-3);
}
.demo__pane iframe {
  width: 100%;
  height: 640px;
  border: 0;
  border-radius: var(--msui-r-panel);
  background-color: var(--msui-base);
  box-shadow: inset 0 0 0 1px var(--msui-hairline);
}
.demo__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px 12px;
  min-height: 44px;
  margin: 0;
}
.demo__stats dt {
  grid-row: 1;
  color: var(--msui-text-3);
  font-size: 12.5px;
}
.demo__stats dd {
  grid-row: 2;
  margin: 0;
  color: var(--msui-text);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.demo__note {
  color: var(--msui-text-3);
}
@media (max-width: 640px) {
  .demo__briefs {
    gap: 6px;
    padding: 0;
    background: none;
    box-shadow: none;
  }
  .demo__briefs button {
    box-shadow: inset 0 0 0 1px var(--msui-hairline);
  }
}
@media (max-width: 960px) {
  .demo__panes {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo__pane iframe {
    height: 520px;
  }
}

/* /for/<name>: one prospect's demo, its video and the two ways in. */
.prospect__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #ffffff;
  margin: 8px 0 20px;
}
.prospect__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 32px;
}