/* ONE SCALE, NOT FIFTEEN. This page carried eleven text sizes between 14.4px and 18.4px —
   .78, .8, .9, .92, .95, .98, 1, 1.02, 1.03, 1.05, 1.1 and 1.15rem — which is eleven sizes
   nobody can tell apart and no reader can learn. What is left says something each time it
   changes: 12.8 fine print, 14.4 small, 15.2 secondary, 17 body (inherited, not restated),
   18.4 the one lead line, and the headings. Anything body-sized names no size at all. */
:root {
  --accent:       #1f5fa8;
  --accent-dark:  #17497f;
  --accent-soft:  #e8f0fa;
  --ink:          #101418;
  --ink-2:        #2b333c;
  --muted:        #5b6670;
  --ok:           #1a8754;
  --line:         #e3e7ec;
  --line-soft:    #eef1f5;
  --bg:           #ffffff;
  --bg-tint:      #f5f7fb;
  --radius:       14px;
  --shadow:       0 1px 2px rgba(16, 20, 24, .04), 0 8px 24px rgba(16, 20, 24, .06);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

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

section[id] { scroll-margin-top: 76px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }

a { color: var(--accent); }

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

.btn {
  display: inline-block;
  padding: .7rem 1.25rem;
  border: 1px solid #bcd4ee;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { background: #d9e7f7; border-color: #9dc0e6; }
.btn:active { background: #c9dcf3; border-color: #7fa9d8; transform: translateY(1px); }
.btn--primary:active { background: #143d6b; border-color: #143d6b; transform: translateY(1px); }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

.btn--sm { padding: .5rem .95rem; font-size: .9rem; }
.btn--lg { padding: .9rem 1.9rem; }

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.nav__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: .85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav__brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); }

.nav__mark {
  display: block;
  width: auto;
  height: 26px;
  flex: 0 0 auto;
}
.nav__mark--sm { height: 19px; }

.nav__word { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }

.nav__links { display: flex; align-items: center; gap: 1.5rem; }
.nav__link { color: var(--ink-2); font-size: .95rem; font-weight: 500; text-decoration: none; }
.nav__link:hover { color: var(--accent); }

.band { background: var(--bg-tint); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }

.hero { padding: 4.5rem 0 3.5rem; }
.cards { padding: 4.5rem 0; }

.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }

.hero__title {
  margin: 0 0 .9rem;
  max-width: 17ch;
  font-size: clamp(2rem, 3.9vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
}

.hero__title strong { font-weight: 700; color: var(--accent); }

/* The line above the headline. Same weight and measure as the lead below it, in the accent
   blue — a paragraph rather than a heading, so it sits above an h1 without inventing a level
   above it for anything reading the page in order. */
.hero__eyebrow { margin: 0 0 .35rem; margin-top: 0; font-size: 1.6rem; font-weight: 800; max-width: 42ch; color: var(--ink);
  display: flex; align-items: center; gap: .5rem; }
/* Sized from the line it sits on, so the lockup holds together at any text size. The width and
   height attributes on the tag are the file's own, which is what stops the line reflowing when
   the image lands. */
.hero__mark { height: 1.9rem; width: auto; flex: none; }

.hero__lead { margin: 0 0 .35rem; font-size: 1.15rem; max-width: 42ch; }
.hero__lead strong { font-weight: 700; }

.hero__checks { margin: 1.1rem 0 2rem; }

.hero__cta { margin: 0; }

.hero__media { display: flex; justify-content: center; }
.hero__media img { display: block; width: auto; height: auto; max-width: 100%; max-height: 540px; }

.flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: .75rem;
  text-align: left;
}
.flow__step { flex: 1 1 0; max-width: 320px; display: flex; }

.flow__arrow { flex: 0 0 auto; display: flex; align-items: center; }
.flow__arrow svg { width: 38px; height: 22px; }
.flow__arrow .s-line { stroke: #b3bfcc; }

.card {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.6rem;
  box-shadow: var(--shadow);
}
.card--flow { display: flex; flex-direction: column; }
.card--accent { border-color: #c3d6ee; background: linear-gradient(180deg, #fbfdff, #fff); }

.card__icon { display: block; margin-bottom: .9rem; }
.card__icon svg { width: 44px; height: 44px; display: block; }

.card__label { margin: 0 0 .45rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.card__body { margin: 0; font-size: .95rem; color: var(--muted); }

.s-fill-soft   { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.s-line        { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-accent      { fill: none; stroke: var(--accent-dark); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.s-accent-fill { fill: var(--accent); }

.explain { padding: 4.5rem 0; }

.step { max-width: 46ch; }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

.photo { display: block; width: 100%; height: auto; border-radius: 18px; }

.crossfade { position: relative; overflow: hidden; border-radius: 18px; }
.crossfade__over {
  position: absolute;

  inset: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover;
  border-radius: 0;
  opacity: 0;
  animation: closing-crossfade 20s ease-in-out infinite;
}
@keyframes closing-crossfade {
  0%, 42%  { opacity: 0 }
  50%, 92% { opacity: 1 }
  100%     { opacity: 0 }
}

.step__eyebrow {
  margin: 0 0 .6rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}
.step__title { margin: 0 0 .6rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.step__body { margin: 0; color: var(--muted); }

.step__body + .checks { margin-top: 1.6rem; }
.step__cta  { margin: 1.4rem 0 0; }

.pricing { padding: 4.5rem 0; }

.section__title { margin: 0 0 .4rem; text-align: center; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.02em; }
.section__sub { margin: 0 auto 2.75rem; max-width: 48ch; text-align: center; color: var(--muted); }

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }

.plans--single { grid-template-columns: minmax(0, 460px); justify-content: center; }

.plan {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.9rem 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}

.plan--facility { border-color: var(--accent); box-shadow: 0 1px 2px rgba(31, 95, 168, .08), 0 10px 30px rgba(31, 95, 168, .12); }

.plan__name  { margin: 0 0 1rem; font-size: .95rem; font-weight: 700; color: var(--ink-2); }
.plan__price { margin: 0 0 1.25rem; line-height: 1; }
.plan__amount { font-size: 2.8rem; font-weight: 700; letter-spacing: -.03em; }
.plan__pitch { margin: 0 0 1.75rem; font-size: .95rem; }
.plan__cta   { margin: auto 0 0; }
.plan__cta .btn { display: block; text-align: center; }

.faq { padding: 4.5rem 0; }
.faq__inner { max-width: 820px; }

.faq__group { margin-top: 2.5rem; }
.faq__group:first-of-type { margin-top: 1.75rem; }

.faq__group-title {
  margin: 0 0 .35rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}

.qa { border-bottom: 1px solid var(--line-soft); }
.qa:first-of-type { border-top: 1px solid var(--line-soft); }

.qa summary {
  position: relative;
  padding: .95rem 2.25rem .95rem 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }

.qa summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 1.25rem;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.qa[open] summary::after { transform: rotate(-135deg); top: 1.45rem; }
.qa[open] summary { color: var(--ink); }

.qa__a { margin: -.15rem 0 1.15rem; max-width: 68ch; color: var(--muted); }
.qa__a--lead { margin-bottom: .4rem; }
.qa__list { margin: 0 0 .6rem; padding-left: 1.25rem; max-width: 68ch; color: var(--muted); }
.qa__list li { margin: .15rem 0; }

.faq__more { margin: 1rem 0 1.15rem; color: var(--muted); }

.demo { padding: 4.5rem 0; }
.demo__cards { margin-top: 4.5rem; }
/* The gap separates the cards from a film above them; with no film, the band's own padding is the gap. */
.demo__cards:first-child { margin-top: 0; }
.demo__inner { max-width: 820px; }
.demo__video { display: block; width: 100%; height: auto; border-radius: 18px; background: #000; }

/* THE WAY INTO THE FILM. A poster that reads as a photograph offers nothing that looks like a
   way in: the browser's own control bar is a thin strip along the bottom edge, and the button in
   it is a few pixels wide. This is a control the size of the thing it starts, and it leaves the
   moment the film does. */
.demo__player { position: relative; }
.demo__play {
  position: absolute; inset: 0; margin: auto;
  width: 96px; height: 96px; padding: 0;
  border: 0; background: none; cursor: pointer; color: #fff;
  transition: transform 120ms ease;
}
.demo__play svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .4)); }
.demo__play .disc { fill: rgba(17, 20, 24, .55); }
.demo__play .ring { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 3; }
.demo__play .tri { fill: #fff; }
.demo__play:hover { transform: scale(1.06); }
.demo__play:hover .disc { fill: rgba(17, 20, 24, .72); }
.demo__play:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 50%; }
.demo__player[data-started] .demo__play { display: none; }

/* Safari draws a start button of its own across the poster. Where this page supplies one, one is
   enough — so the native button goes only inside a player that has a replacement. A video without
   this wrapper keeps whatever its browser gives it. */
.demo__player .demo__video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

@media (prefers-reduced-motion: reduce) {
  .demo__play { transition: none; }
  .demo__play:hover { transform: none; }
}

.closing { padding: 5rem 0 5.5rem; }

.closing__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

/* Sized from .step__title, not beside it. This heading is one of four peers now, and it was
   the only one still carrying the type it had when its section was the page's last word — a
   whole step larger than the three it sits with. The 18ch measure went with it: it was there
   to break the bigger line, and at this size it only made a narrow column. */
.closing__title { margin: 0 0 .9rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.closing__body { margin: 0 0 1.6rem; max-width: 44ch; color: var(--muted); }
.closing__cta { margin: 0; }

.u-hidden { display: none; }

.checks { list-style: none; margin: 0 0 2rem; padding: 0; }
.checks__item { display: flex; align-items: center; gap: .6rem; margin-bottom: .55rem; font-weight: 500; }
.checks__item:last-child { margin-bottom: 0; }
.checks__mark { width: 20px; height: 20px; flex: 0 0 auto; color: var(--ok); }

.foot { border-top: 1px solid var(--line-soft); background: var(--bg-tint); padding: 1.75rem 0; }
.foot__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.foot__brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; font-size: .95rem; }
.foot__legal { margin: .55rem 0 0; max-width: 62ch; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.foot__links { display: flex; align-items: center; gap: .6rem; }
.foot__link { color: var(--muted); font-size: .9rem; text-decoration: none; }
.foot__link:hover { color: var(--accent); text-decoration: underline; }
.foot__sep { color: #c3cad3; }

@media (max-width: 940px) {

  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero__title, .hero__lead, .hero__eyebrow { max-width: none; }
  .hero__media img { max-height: 460px; }
}

@media (max-width: 860px) {

  .plans { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .plan--facility { order: 1; }
  .plan--annual   { order: 2; }
  .plan--payg     { order: 3; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .nav__links { gap: .9rem; }
  .nav__link { display: none; }
  .nav__links .btn { display: inline-block; }

  .hero { padding: 3rem 0 2.5rem; }
  .cards { padding: 3rem 0; }

  .flow { flex-direction: column; align-items: stretch; gap: .5rem; }
  .flow__step { max-width: none; }
  .flow__arrow { justify-content: center; padding: .15rem 0; }
  .flow__arrow svg { transform: rotate(90deg); }

  .explain { padding: 3rem 0; }
  .feature { grid-template-columns: 1fr; gap: 1.75rem; }

  .pricing { padding: 3rem 0; }
  .faq { padding: 3rem 0; }

  .demo { padding: 3rem 0; }

  .closing { padding: 3.5rem 0 4rem; }
  .closing__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .closing__title, .closing__body { max-width: none; }
}

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

  .crossfade__over { animation: none; }
}

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

.start { text-align: left; align-items: stretch; }

.start__h { margin: 0 0 .4rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.start__price { margin: 0 0 1.6rem; font-size: .95rem; font-style: italic; color: var(--ink-2); }
.start__lead { margin: 0 0 .35rem; color: var(--ink-2); }

.start__form { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: .6rem; margin: 0; }

.start__form input:not([type="checkbox"]),
.start__form textarea {
  width: 100%; padding: .8rem .9rem;
  font: inherit; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}

.start__form input:focus,
.start__form textarea:focus,
.start__form input:focus-visible,
.start__form textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.start__form input[type="checkbox"]:focus { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.start__form .btn { width: 100%; margin-top: .3rem; text-align: center; }
.start__form textarea { text-align: left; resize: vertical; line-height: 1.5; font-family: inherit; }

.start__h--contact { margin-bottom: 2rem; }

.start__agree { width: 100%; display: flex; align-items: flex-start; gap: .6rem;
  text-align: left; font-size: .9rem; color: var(--ink-2); margin: .3rem 0 0; cursor: pointer; }
.start__agree input { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; margin-top: .15rem; }

.start__msg { margin: .9rem 0 0; min-height: 1.2rem; font-size: .95rem; color: var(--ink-2); }

.start__msg--good { background-color: gold; padding: 0 8px; color: var(--ink); }
.start__enterprise { margin: 1.4rem 0 0; font-size: .9rem; font-style: italic; color: var(--ink-2); }

#start-card { transition: height 300ms cubic-bezier(.4, 0, .2, 1); overflow: hidden; }
@media (prefers-reduced-motion: reduce) { #start-card { transition: none; } }


.point { margin-top: 1.4rem; }
.point__title { margin: 0 0 .3rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.point__body { margin: 0; color: var(--muted); }


.tagline { display: inline-block; margin-top: .5rem; color: var(--ink); }


@media (max-width: 760px) {
}

/* Real screens from the demo home, in a plain device edge. */
.screen { display: block; width: 100%; height: auto; border: 7px solid #14181f; border-radius: 28px; background: #fff; box-shadow: 0 12px 32px rgba(20, 24, 31, .16); }
.screen--desk { border-width: 5px; border-radius: 14px; }

.phones { display: flex; justify-content: center; align-items: flex-start; gap: 1.25rem; }
.phones .screen { width: min(46%, 260px); }
.phones .screen + .screen { margin-top: 2.5rem; }


/* Everything included: one group open at a time, in the FAQ's own rows. */
.incl { margin-top: 0; }
.incl__group .qa__list { margin-bottom: 1rem; overflow: hidden; }
#included .feature { align-items: start; }

/* The walk-through playing in a box, in the same device edge as the screens. */
.demo-inline { box-sizing: content-box; position: relative; overflow: hidden; border: 5px solid #14181f; border-radius: 14px; background: #fff; box-shadow: 0 12px 32px rgba(20, 24, 31, .16); }
.demo-inline__poster { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* An item on the list that has a walk-through opens it full screen: still a line of the list, with a
   play mark and an underline on hover saying it does something. */
.incl__play { font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .15s; }
.incl__play::after { content: " \25B6"; font-size: .7em; vertical-align: .15em; opacity: .55; }
.incl__play:hover, .incl__play:focus-visible { text-decoration-color: currentColor; }
.incl__play:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }