/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/*
 * LICENSING ALERT — the brand faces (Adobe Clean, Adobe Clean Display) are proprietary.
 * They load from the Adobe Fonts web project in styles/fonts.css. A license / domain
 * allow-list entry is required before aem.live. See fonts/LICENSING.md.
 */

/* metric-matched fallbacks (advance widths measured against adobe-clean 400 / display 900) */
@font-face {
  font-family: adobe-clean-fallback;
  src: local('Arial');
  size-adjust: 91.8%;
  ascent-override: 103%;
  descent-override: 29%;
  line-gap-override: 0%;
}

@font-face {
  font-family: adobe-clean-display-fallback;
  src: local('Arial Black'), local('Arial');
  font-weight: 900;
  size-adjust: 80.2%;
  ascent-override: 106%;
  descent-override: 30%;
  line-gap-override: 0%;
}

:root {
  /* canon (variant B, "live systems") */
  --heading-font-family: adobe-clean-display, 'Adobe Clean Display', adobe-clean-display-fallback, 'Helvetica Neue', arial, sans-serif;
  --body-font-family: adobe-clean, 'Adobe Clean', adobe-clean-fallback, 'Helvetica Neue', arial, sans-serif;
  --mono-font-family: ui-monospace, sfmono-regular, menlo, consolas, monospace;
  --heading-xxl: clamp(48px, 7.2vw, 104px);
  --heading-xl: clamp(36px, 4.6vw, 60px);
  --heading-lg: clamp(28px, 3vw, 40px);
  --heading-md: 22px;
  --body: 18px;
  --body-sm: 15px;
  --line-height-heading: 0.98;
  --line-height-body: 1.55;
  --color-bg: #fff;
  --color-fg: #1b1b1b;
  --color-accent: #1473e6;
  --accent-press: #0d66d0;
  --graphite: #464646;
  --slate: #6d6d6d;
  --fog: #f5f5f5;
  --mist: #fafafa;
  --hairline: #e6e6e6;
  --rule: #dcdcdc;
  --signal: #d5372e;
  --section-padding: 64px;
  --max-width: 1280px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 16px;
  --radius-l: 32px;
  --shadow-rest: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 32px -12px rgb(0 0 0 / 18%);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 6%), 0 24px 48px -16px rgb(0 0 0 / 24%);
  --shadow-header: 0 10px 30px -14px rgb(0 0 0 / 22%);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  /* Spectrum neutral + blue scale (consumed by existing blocks) */
  --spectrum-gray-50: #fff;
  --spectrum-gray-75: #fafafa;
  --spectrum-gray-100: #f5f5f5;
  --spectrum-gray-200: #e6e6e6;
  --spectrum-gray-300: #d5d5d5;
  --spectrum-gray-400: #b3b3b3;
  --spectrum-gray-500: #909090;
  --spectrum-gray-600: #6d6d6d;
  --spectrum-gray-700: #464646;
  --spectrum-gray-800: #2c2c2c;
  --spectrum-gray-900: #1b1b1b;
  --spectrum-blue-400: #4d9fff;
  --spectrum-blue-600: #1473e6;
  --spectrum-blue-700: #0d66d0;
  --spectrum-blue-800: #095aba;
  --brand-signal-color: var(--signal);

  /* semantic aliases */
  --background-color: var(--color-bg);
  --light-color: var(--fog);
  --dark-color: var(--graphite);
  --text-color: var(--color-fg);
  --link-color: var(--color-accent);
  --link-hover-color: var(--accent-press);
  --inverted-background-color: var(--fog);
  --inverted-text-color: var(--color-fg);

  /* type scale aliases */
  --body-font-size-m: var(--body);
  --body-font-size-s: var(--body-sm);
  --body-font-size-xs: 13px;
  --heading-font-size-xxl: clamp(42px, 5vw, 72px);
  --heading-font-size-xl: var(--heading-xl);
  --heading-font-size-l: var(--heading-lg);
  --heading-font-size-m: 26px;
  --heading-font-size-s: 20px;
  --heading-font-size-xs: 16px;

  /* spacing + radius */
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --radius-s: 8px;
  --radius-m: 16px;

  /* floating header: 12px offset + 64px bar */
  --nav-height: 76px;
}

@media (width <= 720px) {
  :root {
    --section-padding: 40px;
    --body: 17px;
    --nav-height: 70px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--nav-height) + 20px);
  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--body-font-family);
  font-size: var(--body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
}

body.appear {
  display: block;
}

header {
  height: var(--nav-height);
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status='loaded'],
footer .footer[data-block-status='loaded'] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.3em;
  font-family: var(--heading-font-family);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
  text-wrap: balance;
  scroll-margin-top: calc(var(--nav-height) + 20px);
}

h1 {
  font-size: var(--heading-font-size-xxl);
  line-height: var(--line-height-heading);
  letter-spacing: -0.04em;
}

h2 {
  font-size: var(--heading-font-size-xl);
  line-height: var(--line-height-heading);
  letter-spacing: -0.04em;
}

h3 {
  font-size: var(--heading-font-size-m);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

h4 { font-size: var(--heading-font-size-s); }
h5 { font-size: var(--heading-font-size-xs); }

h6 {
  font-size: var(--heading-font-size-xs);
  letter-spacing: 0;
}

:is(h1, h2, h3) em {
  font-style: normal;
  color: var(--slate);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.3em;
}

p {
  text-wrap: pretty;
}

code,
pre {
  font-family: var(--mono-font-family);
  font-size: 0.86em;
}

:not(pre) > code {
  overflow-wrap: anywhere;
}

pre {
  padding: 16px;
  border-radius: var(--radius-s);
  background-color: var(--fog);
  overflow-x: auto;
  white-space: pre;
}

input,
textarea,
select,
button {
  font: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

main img {
  max-width: 100%;
  height: auto;
}

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

/* links: accent, underline grows on hover */
a:any-link {
  color: var(--link-color);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: break-word;
  background: linear-gradient(currentcolor, currentcolor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.25s var(--ease-expo), color 0.15s var(--ease-std);
}

a:hover {
  color: var(--link-hover-color);
  background-size: 100% 1px;
}

/* buttons: primary = ink pill, secondary = ghost pill, accent = action blue */
p.button-wrapper {
  margin: 24px 0 0;
}

main .default-content-wrapper p.button-wrapper {
  display: inline-flex;
  margin-right: 12px;
}

a.button:any-link,
button.button {
  --btn-bg: var(--color-fg);
  --btn-fg: #fff;
  --btn-bd: var(--color-fg);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 100%;
  min-height: 48px;
  margin: 0;
  border: 1px solid var(--btn-bd);
  border-radius: 999px;
  padding: 0 24px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 700 16px/1.1 var(--body-font-family);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 0.15s var(--ease-std), border-color 0.15s var(--ease-std), color 0.15s var(--ease-std), transform 0.15s var(--ease-std), box-shadow 0.2s var(--ease-std);
}

a.button:any-link:hover,
button.button:hover {
  --btn-bg: #000;

  box-shadow: var(--shadow-rest);
  color: var(--btn-fg);
}

a.button:any-link:active,
button.button:active {
  transform: scale(0.98);
}

a.button.secondary,
button.button.secondary {
  --btn-bg: #fff;
  --btn-fg: var(--color-fg);
  --btn-bd: #cfcfcf;
}

a.button.secondary:hover,
button.button.secondary:hover {
  --btn-bg: #fff;
  --btn-bd: var(--color-fg);
}

a.button.accent,
button.button.accent {
  --btn-bg: var(--color-accent);
  --btn-bd: var(--color-accent);
}

a.button.accent:hover,
button.button.accent:hover {
  --btn-bg: var(--accent-press);
  --btn-bd: var(--accent-press);
}

a.button[aria-disabled='true'],
button.button:disabled {
  --btn-bg: var(--fog);
  --btn-bd: var(--fog);
  --btn-fg: var(--graphite);

  cursor: not-allowed;
  pointer-events: none;
}

/* arrows are authored (a trailing →, ↓ or ↗); decorateButtons wraps them in .arrow */
.button .arrow {
  transition: transform 0.2s var(--ease-expo);
}

.button:hover .arrow {
  transform: translateX(3px);
}

/* edit mode: repaint CTAs from their authored marks (the editor strips classes) */
.prosemirror-editor p > strong > a,
.prosemirror-editor p > em > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--color-fg);
  border-radius: 999px;
  padding: 0 24px;
  font-weight: 700;
  font-style: normal;
  text-decoration: none;
}

.prosemirror-editor p > strong > a {
  background: var(--color-fg);
  color: #fff;
}

.prosemirror-editor p > em > a {
  background: #fff;
  color: var(--color-fg);
  border-color: #cfcfcf;
}

.prosemirror-editor p > em > strong > a,
.prosemirror-editor p > strong > em > a {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: 0;
  padding-block: var(--section-padding);
}

main > .section:empty {
  display: none;
}

main > .section > div {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main > .section > div + div {
  margin-top: var(--spacing-xl);
}

main > .section:first-of-type {
  padding-top: clamp(28px, 4vw, 56px);
}

/* prose rhythm in default content */
main .default-content-wrapper > :first-child {
  margin-top: 0;
}

main .default-content-wrapper > :is(p, ul, ol, dl) {
  max-width: 68ch;
}

main .default-content-wrapper > h2 {
  max-width: 20ch;
  margin-bottom: 24px;
}

main .default-content-wrapper > h2 + p,
main .default-content-wrapper > p + p {
  color: var(--graphite);
}

main .default-content-wrapper > h3 {
  margin-top: 1.6em;
}

main .default-content-wrapper > :is(ul, ol) {
  padding-left: 1.2em;
}

main .default-content-wrapper li + li {
  margin-top: 0.5em;
}

main .default-content-wrapper li::marker {
  color: var(--slate);
}

/* eyebrow: a short label introducing a hero or a heading */
main .default-content-wrapper > p:first-child:not(:has(*)):has(+ h1, + h2, + h3, + h4) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  color: var(--graphite);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  max-width: 100%;
}

main .default-content-wrapper > p:first-child:not(:has(*)):has(+ h1, + h2, + h3, + h4)::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--signal);
  box-shadow: 0 0 0 3px rgb(213 55 46 / 16%);
}

/* kicker number: a standalone bold numeral leading a columns cell (e.g. "01") */
.columns:not(.quote) > div > div > p:first-child > strong:only-child {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--color-accent);
  font-family: var(--heading-font-family);
  font-size: var(--heading-font-size-m);
  font-variant-numeric: tabular-nums;
}

/* section-metadata styles (default-content sections only) */
main > .section:is(.light, .highlight, .inverted) {
  position: relative;
  padding-block: 0;
  margin-block: var(--section-padding);
}

main > .section:is(.light, .highlight, .inverted) > div {
  max-width: calc(var(--max-width) - 2 * var(--gutter));
  margin-inline: max(16px, calc((100% - var(--max-width)) / 2 + var(--gutter)));
  padding: clamp(32px, 5vw, 64px) clamp(24px, 5vw, 64px);
  background: var(--fog);
}

main > .section:is(.light, .highlight, .inverted) > div + div {
  margin-top: 0;
  padding-top: 0;
}

main > .section:is(.light, .highlight, .inverted) > div:first-child {
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}

main > .section:is(.light, .highlight, .inverted) > div:last-child {
  border-radius: 0 0 var(--radius-l) var(--radius-l);
}

main > .section:is(.light, .highlight, .inverted) > div:only-child {
  border-radius: var(--radius-l);
}

@media (width >= 1440px) {
  main > .section:is(.light, .highlight, .inverted) > div {
    margin-inline: auto;
  }
}

/* long-form docs: the docs-nav section becomes a sticky sidebar column */
@media (width >= 900px) {
  main:has(> .docs-nav-container) {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 64px);
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  main:has(> .docs-nav-container) > .section {
    grid-column: 2;
  }

  main:has(> .docs-nav-container) > .section > div {
    padding-inline: 0;
  }

  main > .section.docs-nav-container {
    grid-column: 1;
    grid-row: 1 / span 60;
    position: sticky;
    top: calc(var(--nav-height) + 24px);
    align-self: start;
    padding-bottom: 0;
  }

  main:has(> .docs-nav-container) > .section:is(.light, .highlight, .inverted) > div {
    max-width: none;
    margin-inline: 0;
  }
}

/* band: a full-bleed fog strip behind the section */
main > .section.band {
  background: var(--fog);
}

/* split sections (copy beside a block): headings run the full column, 20px copy rhythm */
main > .section:is(.stage-container, .layers-container, .video-container, .testimonials-container) .default-content-wrapper > h2 {
  max-width: none;
  margin-bottom: 20px;
}

/* sign-off: a quiet closing line over a rule, CTA to the right */
main > .section.sign-off .default-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  width: calc(100% - 2 * var(--gutter));
  max-width: calc(var(--max-width) - 2 * var(--gutter));
  padding: 32px 0 0;
  border-top: 1px solid var(--color-fg);
}

main > .section.sign-off {
  padding-bottom: clamp(48px, 6vw, 88px);
}

main > .section.sign-off .default-content-wrapper > h2 {
  margin: 0;
  max-width: 22ch;
  color: var(--graphite);
  font-size: var(--heading-lg);
  letter-spacing: -0.03em;
}

main > .section.sign-off .default-content-wrapper > p.button-wrapper {
  margin: 0;
}

main > .section.sign-off .default-content-wrapper > p.button-wrapper a::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 3px rgb(213 55 46 / 30%);
}

/* a modal-trigger form followed by a lone secondary CTA reads as one CTA row */
main > .section > .interest-form-wrapper + .default-content-wrapper:has(> p.button-wrapper:only-child) {
  margin-top: 12px;
}

main > .section > .interest-form-wrapper + .default-content-wrapper > p.button-wrapper:only-child {
  margin-top: 0;
}

/* split: heading left, copy right */
@media (width >= 900px) {
  main > .section.split .default-content-wrapper {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }

  main > .section.split .default-content-wrapper > * {
    grid-column: 8 / span 5;
  }

  main > .section.split .default-content-wrapper > :is(h2, p:first-child:has(+ h2)) {
    grid-column: 1 / span 6;
  }

  main > .section.split .default-content-wrapper > h2 {
    grid-row: 1 / span 20;
  }

  main > .section.split .default-content-wrapper > p:first-child:has(+ h2) + h2 {
    grid-row: 2 / span 20;
  }
}

/* scroll progress bar (long-form pages only, see decorateRoute in scripts.js) */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  width: 100%;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 0;
  background-color: var(--color-accent);
}

/* scroll reveal: content is never hidden, only moved */
@media (prefers-reduced-motion: no-preference) {
  .section-reveal {
    transform: translateY(24px);
    transition: transform 0.9s var(--ease-expo);
  }

  .section-reveal.section-visible {
    transform: none;
  }
}