/* /freetrialsignup/: the sign-up form in a narrow column, the live APM window filling the rest of the page.
   Marketo's own stylesheets and inline widths are taken off by page.js, which also gives its fields the
   su-* classes below. */
.su-page { position: relative; overflow: clip; }
/* no scroll anchoring here: Chrome must not pin the view to a node while the placeholder swaps for the form */
html:has(.su-page) { overflow-anchor: none; }
.su-page::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 900px; pointer-events: none; z-index: -1;
  background: radial-gradient(45% 60% at 72% 10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
}
.su {
  display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
  /* rows: the form and the app (sharing a top edge) / spacer / the logos at the foot of the first screen.
     Nothing is centred on content height: a centred pair moves as a whole whenever anything in it changes
     height while the page loads. The top padding follows the window's height instead. */
  grid-template-rows: auto minmax(0, 1fr) auto; column-gap: clamp(40px, 5vw, 88px); row-gap: 0; align-items: start;
  min-height: calc(100svh - 69px); padding: clamp(32px, calc(50svh - 450px), 150px) clamp(24px, 3.5vw, 64px) 32px;
  /* the form lines up with the nav's logo (.nav-inner: 1440px, 48px padding); the app runs on toward the page edge */
  padding-left: calc(max(0px, (100% - 1440px) / 2) + 48px);
}

/* ───── the form column ───── */
/* the Gartner result, worded as the site words it everywhere; the report page carries Gartner's attribution */
.su-mq { position: relative; display: block; width: fit-content; max-width: 380px; margin: 0 0 28px; padding-left: 16px; font-size: 13.5px; line-height: 1.45; color: var(--fg-2); text-wrap: pretty; transition: color .2s; }
.su-mq i { position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.su-mq svg { display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.su-mq:hover { color: var(--fg-0); }
.su-mq:hover svg { transform: translateX(2px); }
.su-eyebrow { margin: 0 0 14px; font: 500 12.5px/1 var(--mono); color: var(--fg-2); }
.su-title { margin: 0; font-size: clamp(40px, 3.6vw, 54px); line-height: 1.04; font-weight: 600; letter-spacing: -.03em; color: var(--fg-0); }
.su-sub { margin: 14px 0 0; font-size: 16.5px; color: var(--fg-2); }

.signup-form { margin-top: 32px; min-height: 312px; } /* the form's own height, held while the placeholder swaps for it */
/* Until Marketo has rendered and page.js has dressed the form: a placeholder of the same shape (labels, two
   fields, the consent lines, the button with its spinner), so nothing moves when the real form takes its place,
   and Marketo's own unstyled form is never seen. */
.signup-form:not(.is-ready) #mktoForm_2146 { display: none !important; }
.signup-form.is-ready .su-ghost { display: none; }
.su-ghost { display: grid; gap: 18px; }
.su-ghost-field { display: block; height: 48px; border-radius: 12px; border: 1px solid var(--line-2); background: rgb(var(--ink) / .035); }
.su-ghost-text { display: grid; gap: 7px; padding: 4px 0; margin-top: 18px; } /* Marketo keeps an empty row (one more gap) above its consent text */
.su-ghost-text span { display: block; height: 12px; border-radius: 6px; background: rgb(var(--ink) / .07); }
.su-ghost-text span:last-child { width: 46%; }
.su-ghost .su-go { display: flex; align-items: center; justify-content: center; }
.su-ghost-field, .su-ghost-text span { animation: su-pulse 1.4s ease-in-out infinite alternate; }
@keyframes su-pulse { from { opacity: .55; } to { opacity: 1; } }
.su-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.signup-form .mktoForm { width: 100% !important; padding: 0 !important; font: inherit !important; color: var(--fg); display: grid; gap: 18px; }
.signup-form .mktoForm * { font-family: inherit !important; }
.signup-form .mktoOffset, .signup-form .mktoGutter, .signup-form .mktoClear, .signup-form .mktoAsterix { display: none !important; }
.signup-form .mktoFormRow, .signup-form .mktoFormCol, .signup-form .mktoFieldWrap, .signup-form .mktoHtmlText { width: 100% !important; float: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
.signup-form .mktoFormRow:not(:has(:is(select, input:not([type="hidden"]), .mktoHtmlText))) { display: none; }
.signup-form .mktoFieldWrap { position: relative; }

.su-label { display: block !important; width: auto !important; float: none !important; margin: 0 0 7px !important; padding: 0 !important; font-size: 13px; font-weight: 500; color: var(--fg-2); }
.su-input {
  display: block; width: 100% !important; height: 48px; padding: 0 14px !important; float: none !important; border-radius: 12px;
  font: inherit; font-size: 15px !important; color: var(--fg-0);
  background-color: rgb(var(--ink) / .035); border: 1px solid var(--line-2);
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.su-input::placeholder { color: var(--fg-3); }
.su-input:hover { border-color: rgb(var(--ink) / .28); }
.su-input:focus { outline: none; border-color: var(--accent); background-color: rgb(var(--ink) / .05); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.su-input.mktoInvalid { border-color: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 16%, transparent); }
select.su-input {
  appearance: none; -webkit-appearance: none; padding-right: 38px !important; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238a8f8e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
select.su-input option { background: var(--panel); color: var(--fg); }

.signup-form .mktoHtmlText { font-size: 12.5px; line-height: 1.55; color: var(--fg-3); }
.signup-form .mktoHtmlText a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.signup-form .mktoHtmlText a:hover { color: var(--fg-0); }

.signup-form .mktoButtonRow { display: block; }
.signup-form .mktoButtonWrap { margin: 0 !important; display: block !important; }
.su-go { position: relative; width: 100%; height: 48px !important; padding: 0 20px !important; gap: 8px; border-radius: 12px !important; font-size: 15px !important; cursor: pointer; }
.su-go::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor; transition: transform .25s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.su-go:hover::after { transform: translateX(2px); }
.su-go.is-busy { color: transparent !important; pointer-events: none; }
.su-go.is-busy::after {
  -webkit-mask: none; mask: none; background: none; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px;
  border-radius: 50%; border: 2px solid var(--on-inv); border-right-color: transparent; animation: su-spin .7s linear infinite;
}
@keyframes su-spin { to { transform: rotate(1turn); } }

.signup-form .mktoError { position: static !important; margin-top: 8px; }
.signup-form .mktoErrorArrowWrap { display: none !important; }
.signup-form .mktoErrorMsg {
  max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important;
  box-shadow: none !important; text-shadow: none !important; font-size: 13.5px !important; color: var(--red) !important;
}
.signup-form [role="alert"]:not(:empty) { margin-top: 12px !important; font-size: 13.5px !important; color: var(--red) !important; }

.su-gets { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 11px; color: var(--fg); font-size: 14.5px; }
.su-gets li { display: flex; align-items: center; gap: 11px; }
.su-gets svg { width: 20px; height: 20px; padding: 4px; flex: none; border-radius: 999px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* the logos: one row across the bottom of the first screen */
.su-side, .su-stage { grid-row: 1; }
.su-trust { grid-row: 3; margin-top: 40px; grid-column: 1 / -1; align-self: end; display: flex; align-items: center; gap: clamp(32px, 4vw, 72px); padding-top: 26px; border-top: 1px solid var(--line); }
.su-trust p { flex: none; margin: 0; font-size: 13px; color: var(--fg-3); }
.su-logos { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-width: 0; }
.su-logos-track { display: contents; } /* wide: the logos are the row's own flex items; narrow turns this into a marquee */
.su-logos img { height: 26px; width: auto; min-width: 0; object-fit: contain; opacity: .8; }
.su-logos [data-clone] { display: none; }
:root[data-theme="light"] .su-logos img, :root[data-theme="light"] .su-quote img { filter: brightness(.55); }

/* ───── the app ───── */
.su-stage { min-width: 0; }
.su-app { margin: 0; box-shadow: 0 60px 140px -50px rgb(0 0 0 / calc(.8 * var(--sh))), 0 0 0 1px rgb(var(--ink) / .04); }
.su-quotes { display: grid; max-width: 880px; margin-top: 34px; }
.su-quote { grid-area: 1 / 1; display: flex; align-items: flex-start; gap: 24px; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.su-quote[data-on] { opacity: 1; transform: none; pointer-events: auto; }
.su-quote img { flex: none; height: 22px; width: auto; margin-top: 3px; }
.su-quote figcaption { margin-top: 10px; font-size: 13.5px; color: var(--fg-3); }
.su-quote figcaption b { font-weight: 500; color: var(--fg-2); }
.su-quote img.su-quote-mews { height: 14px; margin-top: 6px; opacity: .85; }
:root[data-theme="light"] .su-quote img.su-quote-mews { filter: var(--dark-art); }
.su-quote blockquote { margin: 0; font-size: 16px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.su-dots { grid-area: 2 / 1; display: flex; gap: 6px; margin-top: 16px; }
.su-dots button { width: 6px; height: 6px; padding: 0; border-radius: 3px; background: rgb(var(--ink) / .22); transition: width .3s var(--ease), background .3s; }
.su-dots button[aria-pressed="true"] { width: 20px; background: var(--fg); }

/* ───── narrower: the form above, the app below at full width ───── */
@media (max-width: 1120px) {
  .su { grid-template-columns: minmax(300px, 340px) minmax(0, 1fr); column-gap: 40px; padding: 40px 24px 80px; }
}
@media (max-width: 900px) {
  .su { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; gap: 56px; padding: 40px 24px 96px; }
  .su-side, .su-stage, .su-trust { grid-row: auto; }
  .su-trust { margin-top: 0; }
  .su-side { max-width: 520px; }
}
@media (max-width: 960px) { .su-input { font-size: 16px !important; } }
@media (max-width: 900px) {
  /* one-row marquee with soft edges, as the homepage's logo strip on single-column widths */
  .su-trust { flex-direction: column; align-items: stretch; gap: 22px; }
  .su-logos {
    display: block; overflow: hidden; padding: 4px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .su-logos-track { display: flex; align-items: center; width: max-content; animation: marquee 30s linear infinite; }
  .su-logos img { height: 22px; flex: none; margin-right: 52px; } /* the gap as margin, so -50% is exactly one set */
  .su-logos [data-clone] { display: block; }
}
@media (max-width: 560px) {
  .su { padding: 28px 20px 64px; gap: 44px; }
  .su-title { font-size: 38px; }
  .su-quote { flex-direction: column; gap: 12px; }
  .su-quote blockquote { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .su-quote { transition: none; }
  .su-go.is-busy::after { animation-duration: 2.4s; }
  .su-ghost-field, .su-ghost-text span { animation: none; }
  .su-logos-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 18px; }
  .su-logos [data-clone] { display: none; }
}

/* Optical alignment: the SVGs share a box height, but their wordmarks don't. Sized so the wordmarks read at one
   size, and nudged so they sit on one baseline (Palo Alto's NETWORKS line, Adobe's and MasterClass's marks hang
   below it). Measured against a baseline guide at 2x. */
.su-logos img[alt="Palo Alto Networks"] { height: 27px; transform: translateY(2px); }
.su-logos img[alt="NVIDIA"] { height: 21px; transform: translateY(1px); }
.su-logos img[alt="monday.com"] { height: 30px; transform: translateY(-2px); }
@media (max-width: 900px) {
  .su-logos img[alt="Palo Alto Networks"] { height: 23px; }
  .su-logos img[alt="NVIDIA"] { height: 18px; }
  .su-logos img[alt="monday.com"] { height: 26px; }
}

/* replay.js adds the window's title bar (38px + its 1px border) when it runs: hold that space until it does,
   so the app and the quotes under it don't drop when it lands */
.su-app:not(:has(.cxw-bar)) { padding-top: 39px; }

/* "Continue with Google": the signup app's Google flow in the region picked below (page.js keeps the link in step) */
.su-google { margin-top: 4px; }
.su-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px; height: 48px; border-radius: 12px;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-size: 15px; font-weight: 500; text-decoration: none;
  transition: box-shadow .2s, background .2s;
}
.su-google-btn svg { width: 18px; height: 18px; flex: none; }
.su-google-btn:hover { background: #f8faf9; box-shadow: 0 6px 18px -10px rgb(0 0 0 / .45); }
.su-google-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.su-google-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.su-google-note { margin: 10px 0 0; font-size: 13px; color: var(--fg-3); }
.su-or { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-size: 13px; color: var(--fg-3); }
.su-or::before, .su-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }