/*
 * DCManage — the public site.
 *
 * Loaded after platform.css, which is where every colour, space and radius
 * used here comes from. That is deliberate: a marketing page that invents
 * its own palette ends up describing a product that looks like something
 * else, and the screenshots below are of the real thing. Nothing in this
 * file declares a raw colour.
 *
 * Same rules as the interface it advertises. Logical properties only, so
 * Persian and English are one stylesheet with a different `dir`. No font
 * service, no icon service, no build step — the panel runs on networks that
 * reach nothing but their own site, and a marketing page that needed a CDN
 * would be advertising the opposite of what is being sold.
 *
 * Author: MAJID ISALOO
 */

/* ═══════════════════════════════════════════════════════════════════════
   Shell
   ═══════════════════════════════════════════════════════════════════════ */

.site {
  min-block-size: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.site__main { flex: 1; }

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line);
}

.site-header__inner {
  max-inline-size: 76rem;
  margin-inline: auto;
  padding: var(--s-5) var(--s-7);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-weight: 700;
  font-size: var(--fs-5);
  color: var(--text);
  text-decoration: none;
}

.site-header__brand .brand-word { color: var(--text); }
.site-header__brand .brand-word span { color: var(--accent); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-inline-start: auto;
}

.site-nav__link {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-2);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-3);
  font-weight: 500;
}

.site-nav__link:hover { background: var(--surface-hover); color: var(--text); }
.site-nav__link.is-active { color: var(--accent); }

/* Above the breakpoint the disclosure is not a disclosure: the summary is
   hidden and its contents are an ordinary row of links. */
.site-drawer { margin-inline-start: auto; }
.site-drawer__summary { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Sections
   ═══════════════════════════════════════════════════════════════════════ */

.section {
  max-inline-size: 76rem;
  margin-inline: auto;
  padding: var(--s-9) var(--s-7);
}

.section--tight { padding-block: var(--s-8); }
.section--sunken { background: var(--surface-sunken); max-inline-size: none; }
.section--sunken > * { max-inline-size: 76rem; margin-inline: auto; }

.section__head { max-inline-size: 44rem; margin-block-end: var(--s-8); }
.section__head--center { margin-inline: auto; text-align: center; }

.section__eyebrow {
  display: inline-block;
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--caps-eyebrow);
  color: var(--accent);
  margin-block-end: var(--s-4);
}

.section__title {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: var(--track-tight);
  color: var(--text);
  margin: 0 0 var(--s-5);
}

.section__lead {
  font-size: var(--fs-4);
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-9) var(--s-9);
}

/* A single soft wash rather than an image, so the page carries no asset it
   would have to fetch. */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: -30%;
  inset-inline: -10%;
  block-size: 70%;
  background: radial-gradient(60% 60% at 50% 50%, var(--accent-tint), transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  max-inline-size: 76rem;
  margin-inline: auto;
  padding-inline: var(--s-7);
  text-align: center;
}

.hero__title {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: var(--track-tight);
  color: var(--text);
  margin: 0 0 var(--s-6);
}

.hero__lead {
  max-inline-size: 40rem;
  margin: 0 auto var(--s-7);
  font-size: var(--fs-5);
  line-height: 1.6;
  color: var(--text-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  justify-content: center;
  margin-block-end: var(--s-9);
}

.hero__note {
  margin-block-start: var(--s-6);
  font-size: var(--fs-2);
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════════════
   Screenshots
   ═══════════════════════════════════════════════════════════════════════ */

.shot {
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-sunken);
  border-block-end: 1px solid var(--line);
}

.shot__dot {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.shot__label {
  margin-inline-start: var(--s-4);
  font-size: var(--fs-2);
  color: var(--text-3);
}

.shot img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: var(--s-7);
}

.shot-caption {
  margin-block-start: var(--s-5);
  font-size: var(--fs-3);
  color: var(--text-2);
  line-height: 1.6;
}

.shot-caption strong { color: var(--text); display: block; margin-block-end: var(--s-2); }

/* Phone captures sit at their own width so they are not stretched to a
   column meant for a desktop frame. */
.shot--phone { max-inline-size: 20rem; margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════════
   Features
   ═══════════════════════════════════════════════════════════════════════ */

/* Eight features, so the column count is one eight divides by. A track
   that fitted as many 18rem columns as the width allowed gave three at
   desktop width, and rows of three, three and two with an empty slot at the
   end. Two columns from the site's own 44rem step and no further: each
   feature is a paragraph of two or three sentences, and four columns left
   it about 140px of measure at the 60rem step, a dozen short lines per
   card. Two give it a comfortable line at every width the page reaches. */
.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

@media (min-width: 44rem) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.feature {
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
}

.feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--radius-2);
  background: var(--accent-tint);
  color: var(--accent);
  margin-block-end: var(--s-5);
}

.feature__title {
  font-size: var(--fs-4);
  font-weight: 650;
  color: var(--text);
  margin: 0 0 var(--s-4);
}

.feature__body {
  font-size: var(--fs-3);
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Numbered steps
   ═══════════════════════════════════════════════════════════════════════ */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--s-7);
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
}

.step { counter-increment: step; }

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-invert);
  font-weight: 700;
  font-size: var(--fs-3);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--s-5);
}

.step__number::before { content: counter(step); }

/* A step number is a count, so a Persian page draws it in Persian digits;
   a bare counter() is always decimal Latin whatever the page's language. */
:root[lang="fa"] .step__number::before { content: counter(step, persian); }

/* ═══════════════════════════════════════════════════════════════════════
   Documentation
   ═══════════════════════════════════════════════════════════════════════ */

.docs {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: var(--s-8);
  max-inline-size: 76rem;
  margin-inline: auto;
  padding: var(--s-9) var(--s-7);
}

.docs__nav {
  /* Sticky, which also makes it the positioning context the progress rail
     is measured against. */
  position: sticky;
  inset-block-start: 5rem;
  align-self: start;
  padding-inline-start: var(--s-5);
}

.docs__group {
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--caps-eyebrow);
  color: var(--text-3);
  margin-block: var(--s-6) var(--s-4);
}

.docs__group:first-child { margin-block-start: 0; }

.docs__link {
  display: block;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius-2);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-3);
  border-inline-start: 2px solid transparent;
}

.docs__link:hover { background: var(--surface-hover); color: var(--text); }

.docs__link.is-active {
  color: var(--accent);
  background: var(--accent-tint);
  border-inline-start-color: var(--accent);
  font-weight: 600;
}

.prose-doc { max-inline-size: 46rem; }

/* One continuous document, so each part needs a boundary the eye can find
   and a landing position that clears the sticky header. */
.docs__intro { margin-block-end: var(--s-9); }

.docs__article {
  padding-block-start: var(--s-9);
  margin-block-start: var(--s-9);
  border-block-start: 1px solid var(--line);
  scroll-margin-block-start: 5rem;
}

.docs__article:first-of-type { padding-block-start: 0; margin-block-start: 0; border-block-start: 0; }
.docs__article h2 { margin-block-start: 0; }

.docs__summary { font-size: var(--fs-4); color: var(--text-2); margin-block-end: var(--s-7); }

/* How far through the reader is. It sits along the inline-start edge of the
   contents list, which is the one place on the page that is always beside
   the text being read. */
.docs__progress {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 2px;
  background: var(--line);
  border-radius: var(--radius-1);
}

.docs__progress span {
  display: block;
  inline-size: 100%;
  block-size: 0;
  background: var(--accent);
  border-radius: inherit;
}

.prose-doc h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.25; margin: 0 0 var(--s-5); color: var(--text); }
.prose-doc h2 { font-size: var(--fs-5); margin-block: var(--s-8) var(--s-5); color: var(--text); }
.prose-doc h3 { font-size: var(--fs-4); margin-block: var(--s-7) var(--s-4); color: var(--text); }
.prose-doc p, .prose-doc li { font-size: var(--fs-3); line-height: 1.75; color: var(--text-2); }
.prose-doc ul, .prose-doc ol { padding-inline-start: var(--s-7); margin-block: var(--s-5); }
.prose-doc li { margin-block-end: var(--s-4); }
.prose-doc strong { color: var(--text); font-weight: 650; }
.prose-doc a { color: var(--accent); }

.prose-doc pre {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  padding: var(--s-5) var(--s-6);
  overflow-x: auto;
  direction: ltr;
  text-align: start;
}

.prose-doc code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  direction: ltr;
  unicode-bidi: isolate;
}

.prose-doc :not(pre) > code {
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-1);
  padding: 0.1em 0.35em;
}

.callout {
  margin-block: var(--s-6);
  padding: var(--s-6);
  border-radius: var(--radius-2);
  border-inline-start: 3px solid var(--accent);
  background: var(--accent-tint);
}

.callout p:last-child { margin-block-end: 0; }
.callout--warn { border-inline-start-color: var(--warn); background: var(--warn-tint); }

/* ═══════════════════════════════════════════════════════════════════════
   Pricing
   ═══════════════════════════════════════════════════════════════════════ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-6);
  align-items: start;
}

.plan {
  padding: var(--s-7);
  border: 1px solid var(--line);
  border-radius: var(--radius-3);
  background: var(--surface);
}

.plan--featured { border-color: var(--accent); box-shadow: var(--shadow); }

/* The plan's name is the card's heading. Until there are prices there is
   no price line: "to be announced" in the largest type on the card was
   heavier than the name it sat under, and the page already says it once in
   the callout above the cards. */
.plan__name { font-size: var(--fs-6); font-weight: var(--fw-bold); color: var(--text); margin: 0 0 var(--s-2); }
.plan__for { font-size: var(--fs-2); color: var(--text-3); margin: 0 0 var(--s-6); }

/* The plans that are not featured end in a quiet link rather than a second
   and third button that looked exactly like the first. */
.plan__link {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
}

.plan__list { list-style: none; padding: 0; margin: 0 0 var(--s-7); }

.plan__list li {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  font-size: var(--fs-3);
  color: var(--text-2);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
}

.plan__list li:last-child { border-block-end: 0; }
.plan__list svg { flex: none; margin-block-start: 0.15em; color: var(--ok); }

/* ═══════════════════════════════════════════════════════════════════════
   Frequently asked
   ═══════════════════════════════════════════════════════════════════════ */

.faq { max-inline-size: 46rem; }
.faq--center { margin-inline: auto; }
/* Centred over the plans with room beneath it. It read `margin-inline: auto
   var(--s-9)`, which pushed the box to one side and left nothing between
   it and the cards. */
.callout--measure { max-inline-size: 46rem; margin-inline: auto; margin-block-end: var(--s-8); }
.capability__list--centered { max-inline-size: 46rem; margin-inline: auto; }

.faq__item {
  border-block-end: 1px solid var(--line);
}

.faq__item summary {
  padding: var(--s-6) 0;
  font-size: var(--fs-4);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  align-items: center;
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary svg { flex: none; color: var(--text-3); transition: transform 0.15s ease; }
.faq__item[open] summary svg { transform: rotate(180deg); }
.faq__item p { margin: 0 0 var(--s-6); font-size: var(--fs-3); line-height: 1.75; color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════════════════════════════ */

.site-footer {
  border-block-start: 1px solid var(--line);
  background: var(--surface);
  padding-block: var(--s-8);
}

.site-footer__inner {
  max-inline-size: 76rem;
  margin-inline: auto;
  padding-inline: var(--s-7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--s-7);
}

.site-footer__title {
  font-size: var(--fs-2);
  font-weight: 600;
  letter-spacing: var(--track-eyebrow);
  text-transform: var(--caps-eyebrow);
  color: var(--text-3);
  margin-block-end: var(--s-5);
}

.site-footer a {
  display: block;
  padding-block: var(--s-2);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-3);
}

.site-footer a:hover { color: var(--accent); }

.site-footer__base {
  max-inline-size: 76rem;
  margin: var(--s-8) auto 0;
  padding: var(--s-6) var(--s-7) 0;
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  justify-content: space-between;
  font-size: var(--fs-2);
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════════════
   Narrow
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 60rem) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .docs__nav {
    /* Not sticky at this width, but still the thing the progress rail is
       measured against — without this it escapes to the page box and runs
       the whole length of the document. */
    position: relative;
    inset-block-start: auto;
    padding-block-end: var(--s-6);
    border-block-end: 1px solid var(--line);
  }
}

@media (max-width: 44rem) {
  .site-drawer__summary {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-2);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-3);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

  .site-drawer__summary::-webkit-details-marker { display: none; }
  .site-drawer__summary svg { transition: transform 0.15s ease; }
  .site-drawer[open] .site-drawer__summary svg { transform: rotate(180deg); }

  .site-nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4);
    background: var(--surface);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
  }

  .site-nav__link, .site-nav .btn { text-align: center; }
  .section { padding-block: var(--s-8); }
  .hero { padding-block: var(--s-8) var(--s-7); }
}

@media (prefers-reduced-motion: reduce) {
  .site-drawer__summary svg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Print and motion
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .faq__item summary svg { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Opening a screenshot
   ═══════════════════════════════════════════════════════════════════════

   A screenshot is unreadable at the width a marketing page gives it, so it
   opens. The overlay is the only fixed-position layer on the site; it is
   hidden with the `hidden` attribute rather than a class, so with scripting
   off it is not merely invisible but absent from the accessibility tree. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-6);
  background: color-mix(in srgb, var(--text) 88%, transparent);
}

.lightbox[hidden] { display: none; }

.lightbox__figure {
  margin: 0;
  max-inline-size: min(100%, 82rem);
  max-block-size: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-inline-size: 0;
}

.lightbox__image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  max-block-size: 78vh;
  object-fit: contain;
  border-radius: var(--radius-3);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-4);
  /* On the dimmed backdrop the page's own text colours have nothing to sit
     against, so the caption states its own. */
  color: var(--gray-0);
  font-size: var(--fs-3);
  line-height: 1.6;
}

.lightbox__title { font-weight: 650; font-size: var(--fs-4); }
.lightbox__body { flex: 1 1 20rem; opacity: 0.85; min-inline-size: 0; }
.lightbox__count { font-variant-numeric: tabular-nums; opacity: 0.7; }

.lightbox__close,
.lightbox__step {
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gray-0) 35%, transparent);
  background: color-mix(in srgb, var(--gray-0) 12%, transparent);
  color: var(--gray-0);
  font-size: var(--fs-5);
  line-height: 1;
  cursor: pointer;
}

.lightbox__close:hover,
.lightbox__step:hover { background: color-mix(in srgb, var(--gray-0) 24%, transparent); }

.lightbox__close:focus-visible,
.lightbox__step:focus-visible { outline: 2px solid var(--gray-0); outline-offset: 2px; }

.lightbox__close {
  position: absolute;
  inset-block-start: var(--s-6);
  inset-inline-end: var(--s-6);
}

/* The whole frame is the control, so the cursor says so. */
.shot__open {
  display: block;
  inline-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: start;
}

.shot__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 44rem) {
  .lightbox { padding: var(--s-5); gap: var(--s-4); }
  .lightbox__step { inline-size: 2.25rem; block-size: 2.25rem; }
  .lightbox__caption { font-size: var(--fs-2); }
}

/* ═══════════════════════════════════════════════════════════════════════
   The capability list
   ═══════════════════════════════════════════════════════════════════════ */

.capability-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  padding: var(--s-6) 0 var(--s-8);
  border-block-end: 1px solid var(--line);
  margin-block-end: var(--s-8);
}

.capability-index a {
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-2);
  text-decoration: none;
  font-size: var(--fs-2);
  white-space: nowrap;
}

.capability-index a:hover { border-color: var(--accent); color: var(--accent); }

.capability {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--s-7);
  padding-block: var(--s-8);
  border-block-end: 1px solid var(--line);
  /* Anchored navigation lands under the sticky header without this. */
  scroll-margin-block-start: 5rem;
}

.capability:last-of-type { border-block-end: 0; }

.capability__head { position: sticky; inset-block-start: 5rem; align-self: start; }
.capability__title { font-size: var(--fs-5); color: var(--text); margin: 0 0 var(--s-4); }
.capability__lead { font-size: var(--fs-3); line-height: 1.65; color: var(--text-2); margin: 0; }

.capability__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: var(--s-4) var(--s-7);
  align-content: start;
}

.capability__list li {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  font-size: var(--fs-3);
  line-height: 1.6;
  color: var(--text-2);
}

.capability__list svg { flex: none; margin-block-start: 0.2em; color: var(--ok); }
.capability__list li span { min-inline-size: 0; }

@media (max-width: 60rem) {
  .capability { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .capability__head { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Screens, by section
   ═══════════════════════════════════════════════════════════════════════ */

.screen-group { margin-block-end: var(--s-9); }
.screen-group:last-child { margin-block-end: 0; }

.screen-group__title {
  font-size: var(--fs-5);
  color: var(--text);
  margin: 0 0 var(--s-4);
}

.screen-group__lead {
  font-size: var(--fs-3);
  line-height: 1.65;
  color: var(--text-2);
  max-inline-size: 46rem;
  margin: 0 0 var(--s-7);
}

/* The public site's navigation under a finger: 32px to 38px rows were the
   smallest targets on the page a visitor arrives on. */
@media (pointer: coarse) {
  .site-header__brand, .site-drawer__summary, .site-nav__link, .docs__link,
  .capability-index a, .plan__link { min-block-size: var(--tap); }

  /* The overlay's controls shrank to 36px on a phone, which is where a
     finger is the only pointer there is. */
  .lightbox__close, .lightbox__step { inline-size: var(--tap); block-size: var(--tap); }
}

/* ═══════════════════════════════════════════════════════════════════════
   The selling layer: Frosted indigo on the public site
   ═══════════════════════════════════════════════════════════════════════
   The site is the product's front door, so it wears the product's theme:
   frosted glass panes over the platform's mesh, indigo-to-violet light for
   the place that matters, one section hue per card, and type a size larger
   than the operator screens, because this reader arrived from a search and
   is deciding, not working a shift.

   Every colour, blur and shadow here is a token from platform.css's
   Frosted indigo layer, which already redefines them for the dark scheme,
   reduced transparency, more contrast and forced colours; nothing below
   names a colour of its own. Direction comes from logical properties and
   from --lit-angle, so Persian mirrors without a second rule. */

/* ── Type, a step up ─────────────────────────────────────────────────── */
.section__title { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); text-wrap: balance; }
.section__lead { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem); line-height: var(--lh-body); }
.section__eyebrow { font-weight: var(--fw-bold); }
.site-nav__link { font-size: var(--fs-control); }

/* ── Larger buttons for the decisions on this site ───────────────────── */
.btn.btn--lg {
  min-block-size: 3rem;
  padding-inline: var(--s-7);
  font-size: var(--fs-4);
  border-radius: var(--radius-2);
}

/* ── Hero ────────────────────────────────────────────────────────────── */
.hero { padding-block: var(--s-9) var(--s-8); }

/* The platform's mesh is the ground now; a second glow on top of it only
   muddied the indigo blob it sits on. */
.hero::before { display: none; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0 0 var(--s-7);
  padding: var(--s-3) var(--s-6);
  border: var(--hair) solid var(--glass-edge);
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-pill), var(--inner-shine);
  color: var(--accent);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.hero__eyebrow::before {
  content: "";
  flex: none;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background-color: var(--lit-a);
  background-image: linear-gradient(var(--lit-angle), var(--lit-a), var(--lit-b));
}

.hero__title {
  max-inline-size: 58rem;
  margin-inline: auto;
  font-size: clamp(2.125rem, 1.25rem + 3.6vw, 3.75rem);
  text-wrap: balance;
}

.hero__lead {
  max-inline-size: 46rem;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: var(--lh-body);
}

.hero__actions {
  align-items: center;
  margin-block-end: var(--s-7);
}

.hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-block-size: var(--control-h);
  padding-inline: var(--s-4);
  color: var(--accent);
  font-size: var(--fs-4);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.hero__link:hover { text-decoration: underline; text-underline-offset: 0.25em; }

/* The demonstration card sits in a centred hero, so it centres too, on
   glass rather than a flat tint. */
.hero .demo-cta {
  max-inline-size: 48rem;
  margin-inline: auto;
  justify-items: center;
  text-align: center;
  border-color: var(--accent-edge);
  background: linear-gradient(180deg, var(--glass-strong), var(--glass-bottom));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-glass), var(--inner-shine);
}
.hero .demo-cta__note { justify-content: center; font-size: var(--fs-3); }
.hero .demo-cta__actions { justify-content: center; }

.hero__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-4);
  margin: var(--s-7) 0 0;
  padding: 0;
  list-style: none;
}
.hero__points li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border: var(--hair) solid var(--glass-edge);
  border-radius: var(--radius-pill);
  background: var(--glass-soft);
  color: var(--text);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
}
.hero__points svg { flex: none; color: var(--ok); }

/* The product shot floats on a violet-to-indigo glow, the theme's light. */
.hero__shot {
  position: relative;
  isolation: isolate;
  margin-block-start: var(--s-9);
}
.hero__shot::before {
  content: "";
  position: absolute;
  inset: 6% 6% -4%;
  z-index: -1;
  border-radius: var(--radius-4);
  background:
    radial-gradient(60% 70% at var(--x-start) 30%, var(--blob-indigo), var(--clear) 70%),
    radial-gradient(60% 70% at var(--x-end) 70%, var(--blob-violet), var(--clear) 70%);
  filter: blur(28px);
  pointer-events: none;
}

/* ── Glass panes for the site's own cards ────────────────────────────── */
.pain,
.cta-band,
.includes,
.know-list li,
.capability,
.step,
.faq {
  border: var(--hair) solid var(--glass-edge);
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom) var(--glass-fade));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-glass), var(--inner-shine), 0 0 0 var(--hair) var(--glass-ring);
}

/* One section hue per card. The hue is decoration and never a state, so
   the cards cycle through the theme's decorative families. */
.pain,
.feature,
.step {
  --card-hue: var(--hue-indigo);
  --card-tint: var(--hue-indigo-tint);
  --card-a: var(--hue-indigo-a);
  --card-b: var(--hue-indigo-b);
  position: relative;
  overflow: hidden;
}
.pain--billing,
.feature:nth-child(9n + 2),
.step:nth-child(2) {
  --card-hue: var(--hue-violet); --card-tint: var(--hue-violet-tint);
  --card-a: var(--hue-violet-a); --card-b: var(--hue-violet-b);
}
.pain--access,
.feature:nth-child(9n + 3),
.step:nth-child(3) {
  --card-hue: var(--hue-cyan); --card-tint: var(--hue-cyan-tint);
  --card-a: var(--hue-cyan-a); --card-b: var(--hue-cyan-b);
}
.feature:nth-child(9n + 4) {
  --card-hue: var(--hue-sky); --card-tint: var(--hue-sky-tint);
  --card-a: var(--hue-sky-a); --card-b: var(--hue-sky-b);
}
.feature:nth-child(9n + 5) {
  --card-hue: var(--hue-blue); --card-tint: var(--hue-blue-tint);
  --card-a: var(--hue-blue-a); --card-b: var(--hue-blue-b);
}
.feature:nth-child(9n + 6) {
  --card-hue: var(--hue-fuchsia); --card-tint: var(--hue-fuchsia-tint);
  --card-a: var(--hue-fuchsia-a); --card-b: var(--hue-fuchsia-b);
}
.feature:nth-child(9n + 7) {
  --card-hue: var(--hue-teal); --card-tint: var(--hue-teal-tint);
  --card-a: var(--hue-teal-a); --card-b: var(--hue-teal-b);
}
.feature:nth-child(9n + 8) {
  --card-hue: var(--hue-slate); --card-tint: var(--hue-slate-tint);
  --card-a: var(--hue-slate-a); --card-b: var(--hue-slate-b);
}

/* The hue's edge along the top of the card. */
.pain::before,
.feature::before,
.step::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background-image: linear-gradient(var(--lit-angle), var(--card-a), var(--card-b));
}

:root .feature__icon,
.pain__icon {
  background: var(--card-tint);
  color: var(--card-hue);
}

/* ── Three jobs ──────────────────────────────────────────────────────── */
.pains {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}
@media (min-width: 56rem) {
  .pains { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.pain {
  padding: var(--s-8) var(--s-7) var(--s-7);
  border-radius: var(--radius-3);
}
.pain__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--chip-lg);
  block-size: var(--chip-lg);
  border-radius: var(--radius-slip);
  box-shadow: inset 0 0 0 var(--hair) var(--chip-ring);
  margin-block-end: var(--s-6);
}
.pain__title { font-size: var(--fs-5); color: var(--text); margin: 0 0 var(--s-4); }
.pain__body { font-size: var(--fs-3); line-height: var(--lh-body); color: var(--text-2); margin: 0; }

/* ── Features: nine cards, three a row where there is room ───────────── */
@media (min-width: 64rem) {
  .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.feature { padding: var(--s-8) var(--s-7) var(--s-7); }
.feature__title { font-size: var(--fs-4); font-weight: var(--fw-bold); }
.feature__body { line-height: var(--lh-body); }

.pain,
.feature,
.plan {
  transition: transform 180ms ease, box-shadow 180ms ease;
}
@media (hover: hover) {
  .pain:hover,
  :root .feature:hover,
  :root .plan:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lift), var(--inner-shine), 0 0 0 var(--hair) var(--glass-ring);
  }
}

.section__more {
  margin: var(--s-8) 0 0;
  text-align: center;
}

/* ── Steps, as panes ─────────────────────────────────────────────────── */
.step {
  padding: var(--s-8) var(--s-7) var(--s-7);
  border-radius: var(--radius-3);
}
:root .step__number {
  inline-size: var(--chip-lg);
  block-size: var(--chip-lg);
  font-size: var(--fs-4);
  box-shadow: var(--shadow-lit);
}

/* ── Phones ──────────────────────────────────────────────────────────── */
.shot-grid--phones { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ── Questions, on one pane ──────────────────────────────────────────── */
.faq {
  padding-inline: var(--s-7);
  border-radius: var(--radius-3);
}
.faq__item:last-child { border-block-end: 0; }
.faq__item summary { line-height: var(--lh-snug); }
.faq__item summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-1); }
.faq__item p { line-height: var(--lh-body); }

/* ── The closing band ────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--s-9) var(--s-8);
  border-radius: var(--radius-4);
  text-align: center;
  box-shadow: var(--shadow-lift), var(--inner-shine), 0 0 0 var(--hair) var(--glass-ring);
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 90% at var(--x-start) 0%, var(--blob-indigo), var(--clear) 70%),
    radial-gradient(50% 90% at var(--x-end) 100%, var(--blob-violet), var(--clear) 70%);
  pointer-events: none;
}
.cta-band__title {
  margin: 0 0 var(--s-5);
  color: var(--text);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.cta-band__lead {
  max-inline-size: 40rem;
  margin: 0 auto var(--s-8);
  color: var(--text-2);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  line-height: var(--lh-body);
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-5);
}

/* Inside the documentation it is a closing note to a column of prose. */
.cta-band--inline {
  margin-block-start: var(--s-9);
  padding: var(--s-8) var(--s-7);
  border-radius: var(--radius-3);
  text-align: start;
}
.prose-doc .cta-band--inline h2 { margin-block-start: 0; }
.cta-band--inline .cta-band__lead { margin-inline: 0; margin-block-end: var(--s-7); }
.cta-band--inline .cta-band__actions { justify-content: flex-start; }

.section--flush-top { padding-block-start: 0; }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.plans { align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-8) var(--s-7) var(--s-7);
}
.plan__name { font-size: var(--fs-6); }
.plan__for { font-size: var(--fs-3); color: var(--text-2); }
.plan__list { flex: 1; }
.plan__list li { font-size: var(--fs-3); }
.plan__cta { inline-size: 100%; justify-content: center; }

:root .plan--featured {
  background:
    radial-gradient(90% 60% at var(--x-end) 0%, var(--tint-active), var(--clear) 70%),
    linear-gradient(180deg, var(--glass-strong), var(--glass-bottom) var(--glass-fade));
}

.plan__badge {
  position: absolute;
  inset-block-start: var(--s-6);
  inset-inline-end: var(--s-6);
  padding: var(--s-2) var(--s-5);
  border-radius: var(--radius-pill);
  background-color: var(--lit-a);
  background-image: linear-gradient(var(--lit-angle), var(--lit-a), var(--lit-b));
  color: var(--on-lit);
  font-size: var(--fs-1);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-lit);
}

.includes {
  margin-block-start: var(--s-8);
  padding: var(--s-7);
  border-radius: var(--radius-3);
}
.includes__title { margin: 0 0 var(--s-5); font-size: var(--fs-4); color: var(--text); }
.includes__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--s-4) var(--s-7);
  margin: 0;
  padding: 0;
  list-style: none;
}
.includes__list li {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  color: var(--text-2);
  font-size: var(--fs-3);
  line-height: var(--lh-snug);
}
.includes__list svg { flex: none; margin-block-start: 0.15em; color: var(--ok); }

/* ── The features page ──────────────────────────────────────────────── */
.capability-index a {
  border-color: var(--glass-edge);
  background: var(--glass-soft);
  font-size: var(--fs-2);
  font-weight: var(--fw-medium);
}
.capability-index a:hover { background: var(--glass-hover); }
.capability-index a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.capability {
  margin-block-end: var(--s-6);
  padding: var(--s-7);
  border-radius: var(--radius-3);
}
.capability:last-of-type { border-block-end: var(--hair) solid var(--glass-edge); }
.capability__title { font-size: var(--fs-5); }

.know-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  max-inline-size: 60rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
@media (min-width: 44rem) {
  .know-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.know-list li {
  display: flex;
  gap: var(--s-5);
  align-items: flex-start;
  padding: var(--s-6) var(--s-7);
  border-radius: var(--radius-3);
  color: var(--text-2);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
}
.know-list svg { flex: none; margin-block-start: 0.25em; color: var(--info); }

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer__brand p {
  max-inline-size: 22rem;
  margin: var(--s-5) 0 0;
  color: var(--text-2);
  font-size: var(--fs-3);
  line-height: var(--lh-body);
}
.site-footer .site-header__brand { padding-block: 0; color: var(--text); }

/* ── Header between the phone drawer and a wide screen ──────────────── */
/* Seven items do not fit a row at tablet width. Sign-in is for people who
   already have the product, and the footer carries it, so it steps aside
   here rather than pushing the call to action onto a second line. */
@media (min-width: 44.0625rem) and (max-width: 64rem) {
  .site-nav__link--signin { display: none; }
  .site-nav__link { padding-inline: var(--s-4); }
}

/* ── Phone width ─────────────────────────────────────────────────────── */
@media (max-width: 30rem) {
  .hero__actions,
  .cta-band__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn,
  .cta-band__actions .btn { justify-content: center; }
  .hero__link { justify-content: center; }
  .cta-band { padding: var(--s-8) var(--s-6); }
  .pain, .feature, .step, .plan, .capability { padding-inline: var(--s-6); }
}

@media (prefers-reduced-motion: reduce) {
  .pain, .feature, .plan { transition: none; }
  .pain:hover, :root .feature:hover, :root .plan:hover { transform: none; }
}

@media (forced-colors: active) {
  .plan__badge { border: 1px solid CanvasText; }
  .pain::before, .feature::before, .step::before, .hero__shot::before, .cta-band::before { display: none; }
}

/* The recommended plan keeps its ring when it lifts. */
@media (hover: hover) {
  :root .plan--featured:hover { box-shadow: var(--shadow-lift), 0 0 0 2px var(--brand-600); }
}

/* The demonstration is the header's primary action now, so it wears the
   primary ink; the quieter accent outline platform.css gives .site-nav__demo
   would otherwise put indigo text on the indigo ink. */
.site-nav .btn--primary.site-nav__demo,
.site-nav .btn--primary.site-nav__demo:hover {
  border-color: var(--btn-ink-edge);
  color: var(--on-ink);
}