/* Landing page styles shared by overrides/home.html and overrides/cloud.html */

.md-main__inner.md-grid:has(> .cl) {
  margin: 0;
  max-width: 100%;
}

.cl {
  width: 100%;
  font-size: 16px;
  --cl-bg: var(--md-default-bg-color, #1e2129);
  --cl-surface: #272a35;
  --cl-surface-2: #2e3240;
  --cl-border: #353a49;
  --cl-border-strong: #474d61;
  --cl-text: #fff;
  --cl-muted: #b4b6bd;
  --cl-faint: #80838b;
  --cl-accent: #a78bfa;
  --cl-accent-2: #54d2d0;
  --cl-grad: linear-gradient(90deg, #7e22ce 0%, #625aaf 35%, #7badbb 75%, #54d2d0 100%);

  background: var(--cl-bg);
  color: var(--cl-text);
  line-height: 1.6;
  overflow-x: hidden;
}

.cl *, .cl *::before, .cl *::after { box-sizing: border-box; }
.cl h1, .cl h2, .cl h3, .cl p { margin: 0; }
.cl h1.cl-eyebrow { margin-bottom: 12px; line-height: inherit; }
.cl a { color: inherit; text-decoration: none; }

.cl-wrap {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 24px;
}

.cl-section { padding: 88px 0; position: relative; }
.cl-section + .cl-section { border-top: 1px solid var(--cl-border); }

.cl-eyebrow {
  display: inline-block;
  font-size: .8em;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: var(--cl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
}

.cl-h2 {
  font-size: 2.6em;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.cl-lead {
  margin-top: 16px;
  font-size: 1.15em;
  color: var(--cl-muted);
  max-width: 640px;
}
.cl-center { text-align: center; }
.cl-center .cl-lead { margin-left: auto; margin-right: auto; }

/* Buttons */
.cl-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.cl-center .cl-btns { justify-content: center; }
.cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 12px;
  font-weight: 600;
  transition: transform .25s, background-color .25s, border-color .25s;
}
.cl-btn:hover { transform: translateY(-1px); }
.cl-btn i { transition: transform .25s; }
.cl-btn:hover i.fa-arrow-right { transform: translateX(3px); }
.cl .cl-btn--primary { background: #fff; color: #000; }
.cl .cl-btn--primary:hover { background: #e9e9ee; }
.cl-btn--ghost { border: 1px solid var(--cl-border-strong); color: var(--cl-text); }
.cl-btn--ghost:hover { border-color: #fff; }

/* Hero */
.cl-hero { padding: 96px 0 72px; position: relative; }
.cl-hero__glow {
  position: absolute;
  width: 520px; height: 320px;
  right: 2%; top: 18%;
  background: var(--cl-grad);
  filter: blur(110px);
  opacity: .35;
  pointer-events: none;
}
.cl-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
  position: relative;
}
.cl-hero .cl-hero__title {
  font-size: 3.6em;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.cl-hero .cl-hero__title span {
  display: block;
  font-family: Poly, Georgia, serif;
  font-weight: 400;
  font-style: italic;
  background: var(--cl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: .08em;
}
.cl-hero .cl-lead { font-size: 1.25em; }
.cl-hero__note { margin-top: 14px; font-size: .9em; color: var(--cl-faint); }

.cl-device {
  border-radius: 14px;
  border: 1px solid var(--cl-border-strong);
  background: var(--cl-surface-2);
  padding: 10px;
  box-shadow: 0 40px 80px -30px rgba(126, 34, 206, .45), 0 0 0 1px rgba(255,255,255,.03);
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg);
  transition: transform .6s;
}
.cl-device:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg); }
.cl-device__bar { display: flex; gap: 6px; padding: 2px 4px 10px; }
.cl-device__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--cl-border-strong); }
.cl-device img { display: block; width: 100%; height: auto; border-radius: 6px; }

/* Proof bar */
.cl-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 72px;
}
.cl-fact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--cl-border);
  border-radius: 14px;
  background: var(--cl-surface);
}
.cl-fact i { font-size: 1.3em; color: var(--cl-accent-2); width: 24px; text-align: center; }
.cl-fact b { display: block; font-weight: 600; line-height: 1.3; }
.cl-fact small { color: var(--cl-faint); font-size: .85em; }

/* Steps */
.cl-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
  counter-reset: step;
}
.cl-step {
  padding: 28px;
  border: 1px solid var(--cl-border);
  border-radius: 16px;
  background: var(--cl-surface);
  position: relative;
}
.cl-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 22px; right: 26px;
  font-size: 2.4em;
  font-weight: 700;
  color: var(--cl-border-strong);
  line-height: 1;
}
.cl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(126,34,206,.35), rgba(84,210,208,.25));
  border: 1px solid rgba(167,139,250,.35);
  font-size: 1.25em;
  margin-bottom: 20px;
}
.cl-step h3, .cl-feature h3, .cl-card h3 { font-size: 1.3em; font-weight: 600; }
.cl-step p { margin-top: 8px; color: var(--cl-muted); }

/* Feature rows */
.cl-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 64px;
  align-items: center;
  margin-top: 80px;
}
.cl-feature--flip .cl-feature__text { order: 2; }
.cl-feature h3 { font-size: 1.9em; line-height: 1.2; }
.cl-feature p { margin-top: 14px; color: var(--cl-muted); font-size: 1.05em; }
.cl-checks { list-style: none; padding: 0; margin: 22px 0 0; }
.cl-checks li { display: flex; gap: 12px; padding: 7px 0; color: #e4e5e9; }
.cl-checks li i { color: var(--cl-accent-2); margin-top: 5px; font-size: .85em; }
.cl-shot {
  border-radius: 14px;
  border: 1px solid var(--cl-border-strong);
  background: var(--cl-surface-2);
  padding: 8px;
  box-shadow: 0 30px 60px -30px rgba(84, 210, 208, .25);
}
.cl-shot img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* Access diagram */
.cl-diagram {
  border-radius: 14px;
  border: 1px solid var(--cl-border-strong);
  background: var(--cl-surface);
  padding: 28px 20px;
}
.cl-diagram svg { display: block; width: 100%; height: auto; }

/* Pricing */
.cl-toggle {
  display: inline-flex;
  margin-top: 32px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--cl-border-strong);
  background: var(--cl-surface);
}
.cl-toggle button {
  font: inherit;
  font-weight: 600;
  font-size: .95em;
  color: var(--cl-muted);
  background: transparent;
  border: 0;
  padding: 8px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.cl-toggle button[aria-pressed="true"] { background: #fff; color: #000; }
.cl-toggle em {
  font-style: normal;
  font-size: .78em;
  margin-left: 6px;
  color: #0f766e;
  background: #ccfbf1;
  padding: 2px 7px;
  border-radius: 999px;
}

.cl-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 40px;
  text-align: left;
}
.cl-card {
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--cl-border);
  border-radius: 18px;
  background: var(--cl-surface);
  position: relative;
}
.cl-card--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--cl-surface-2), var(--cl-surface-2)) padding-box,
    var(--cl-grad) border-box;
  box-shadow: 0 30px 70px -35px rgba(126, 34, 206, .7);
}
.cl-badge {
  position: absolute;
  top: -12px; left: 24px;
  font-size: .72em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cl-grad);
  color: #fff;
}
.cl-card > p { margin-top: 8px; color: var(--cl-muted); font-size: .95em; min-height: 4.8em; }
.cl-price { margin-top: 20px; display: flex; align-items: baseline; gap: 6px; }
.cl-price b { font-size: 2.6em; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.cl-price span { color: var(--cl-muted); font-weight: 600; }
.cl-per { margin-top: 6px; color: var(--cl-faint); font-size: .9em; min-height: 2.8em; }
.cl-card .cl-checks { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--cl-border-strong); font-size: .95em; }
.cl-card .cl-checks li { padding: 4px 0; }
.cl-card .cl-btn { margin-top: auto; justify-content: center; }
.cl-card__spacer { flex: 1; min-height: 24px; }

.cl-pricing-notes {
  margin-top: 22px;
  color: var(--cl-faint);
  font-size: .9em;
}

/* Calculator + discounts */
.cl-calc {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 18px;
  margin-top: 40px;
  text-align: left;
}
.cl-panel {
  padding: 28px;
  border: 1px solid var(--cl-border);
  border-radius: 18px;
  background: var(--cl-surface);
}
.cl-panel h3 { font-size: 1.2em; font-weight: 600; margin-bottom: 18px; }
.cl-field { margin-bottom: 18px; }
.cl-field label { display: flex; justify-content: space-between; font-size: .9em; color: var(--cl-muted); margin-bottom: 8px; }
.cl-field label output { color: #fff; font-weight: 700; }
.cl-field select {
  width: 100%;
  font: inherit;
  color: #fff;
  background: var(--cl-surface-2);
  border: 1px solid var(--cl-border-strong);
  border-radius: 10px;
  padding: 10px 12px;
}
.cl-field input[type="range"] { width: 100%; accent-color: var(--cl-accent); }
.cl-total {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px dashed var(--cl-border-strong);
}
.cl-total b { font-size: 2.2em; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.cl-total small { display: block; color: var(--cl-faint); font-size: .85em; }
.cl-total__label { color: var(--cl-muted); }
.cl-total__right { text-align: right; }

.cl-tiers { list-style: none; margin: 0; padding: 0; }
.cl-tiers li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--cl-border);
  color: var(--cl-muted);
  transition: color .2s;
}
.cl-tiers li:last-child { border-bottom: 0; }
.cl-tiers li b { font-size: 1.15em; color: var(--cl-accent-2); }
.cl-tiers li.is-active { color: #fff; font-weight: 600; }
.cl-tiers li.is-active b { color: #fff; }

/* 100+ players: custom deployment */
.cl-deploy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 48px 0 8px;
}
.cl-deploy .cl-panel p { color: var(--cl-muted); }
.cl-deploy .cl-panel h3 { margin-bottom: 10px; }

/* FAQ */
.cl-faq { max-width: 820px; margin: 48px auto 0; }
.cl-faq details {
  border-bottom: 1px solid var(--cl-border);
  padding: 4px 0;
}
.cl-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-weight: 600;
  font-size: 1.1em;
}
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary i { color: var(--cl-muted); transition: transform .25s; }
.cl-faq details[open] summary i { transform: rotate(45deg); }
.cl-faq details p { padding: 0 0 18px; color: var(--cl-muted); }
.cl-faq details p a { color: var(--cl-accent); }

/* Final CTA */
.cl-cta {
  position: relative;
  overflow: hidden;
  padding: 72px 32px;
  border-radius: 24px;
  border: 1px solid var(--cl-border-strong);
  background: var(--cl-surface);
  text-align: center;
}
.cl-cta::before {
  content: "";
  position: absolute;
  inset: auto 15% -60% 15%;
  height: 100%;
  background: var(--cl-grad);
  filter: blur(90px);
  opacity: .35;
}
.cl-cta > * { position: relative; }
.cl-contact { margin-top: 24px; color: var(--cl-faint); font-size: .95em; }
.cl-contact a { color: var(--cl-muted); }
.cl-contact a:hover { color: #fff; }

/* Home page */
.cl-hero--center { text-align: center; padding-top: 72px; }
.cl-hero--center .cl-hero__glow { left: 50%; right: auto; top: 30%; transform: translateX(-50%); }
.cl-hero--center .cl-lead { margin-left: auto; margin-right: auto; max-width: 600px; }
.cl-hero--center .cl-btns { justify-content: center; }
.cl-hero--center .cl-facts { text-align: left; }
.cl-hero__logo { display: block; width: 420px; height: auto; max-width: 80%; margin: 0 auto 40px; }
.cl-hero--center .cl-hero__title { font-size: 4.2em; position: relative; }

.cl-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.cl-showcase .cl-panel { padding: 16px 16px 28px; transition: transform .3s, border-color .3s; }
.cl-showcase .cl-panel:hover { transform: translateY(-4px); border-color: var(--cl-border-strong); }
.cl-showcase__img {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border-radius: 12px;
  background: #f4f5f8;
  margin-bottom: 24px;
}
.cl-showcase__img img { max-width: 85%; max-height: 170px; }
.cl-showcase__img--art { background: var(--cl-surface-2); padding: 0; overflow: hidden; }
.cl-showcase__img--art img { max-width: 100%; max-height: 100%; }
.cl-showcase h3 { font-size: 1.3em; font-weight: 600; padding: 0 12px; }
.cl-showcase p { margin-top: 8px; color: var(--cl-muted); padding: 0 12px; }

.cl-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 56px;
}
.cl-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cl-tile {
  padding: 26px;
  border: 1px solid var(--cl-border);
  border-radius: 16px;
  background: var(--cl-surface);
}
.cl-tile .cl-icon { margin-bottom: 16px; }
.cl-tile h3 { font-size: 1.15em; font-weight: 600; }
.cl-tile p { margin-top: 6px; color: var(--cl-muted); }

.cl-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: center;
  padding: 40px;
  border-radius: 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--cl-surface), var(--cl-surface)) padding-box,
    var(--cl-grad) border-box;
}
.cl-teaser .cl-h2 { font-size: 2.1em; }
.cl-teaser .cl-btns { margin-top: 24px; }

.cl-reviews {
  columns: 3 300px;
  column-gap: 18px;
  margin-top: 48px;
}
.cl-review {
  break-inside: avoid;
  margin: 0 0 18px;
  padding: 24px;
  border: 1px solid var(--cl-border);
  border-radius: 16px;
  background: var(--cl-surface);
}
.cl-review blockquote { margin: 0; padding: 0; border: 0; color: #e4e5e9; }
.cl-review figcaption { margin-top: 16px; color: var(--cl-faint); font-size: .9em; }
.cl-review figcaption b { display: block; color: #fff; font-weight: 600; }
.cl-review .cl-stars { color: #fbbf24; font-size: .85em; letter-spacing: 2px; margin-bottom: 10px; }

/* Responsive */
@media (max-width: 1000px) {
  .cl-showcase, .cl-teaser { grid-template-columns: minmax(0, 1fr); }
  .cl-tiles, .cl-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-hero--center .cl-hero__title { font-size: 3.2em; }
  .cl-hero__grid, .cl-feature, .cl-calc { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .cl-feature--flip .cl-feature__text { order: 0; }
  .cl-device, .cl-device:hover { transform: none; }
  .cl-plans, .cl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .cl-deploy { grid-template-columns: minmax(0, 1fr); }
  .cl-hero .cl-hero__title { font-size: 3em; }
}
@media (max-width: 640px) {
  .cl-wrap { padding: 0 16px; }
  .cl-section { padding: 64px 0; }
  .cl-hero { padding: 56px 0 48px; }
  .cl-hero .cl-hero__title { font-size: 2.4em; }
  .cl-h2 { font-size: 1.9em; }
  .cl-feature h3 { font-size: 1.5em; }
  .cl-plans, .cl-facts, .cl-steps, .cl-tiles, .cl-tiles--4 { grid-template-columns: minmax(0, 1fr); }
  .cl-hero--center .cl-hero__title { font-size: 2.4em; }
  .cl-teaser { padding: 28px 20px; }
  .cl-card > p, .cl-per { min-height: 0; }
  .cl-cta { padding: 48px 20px; }
  .cl-btns .cl-btn { width: 100%; justify-content: center; }
}