/* Shared components on the homepage's look (src/components/*.astro). Loaded by
   SiteStyles after the UI kit, so every page on the global look has them.
   Built from the homepage's values: DM Mono labels, type tokens, hairlines. */

/* ---------- Logo strip (LogoStrip.astro) ---------- */
/* A mono lede over one row of grey customer logos. */

.logo-strip {
  padding: 48px 0;
}

@media (min-width: 1024px) {
  .logo-strip { padding: 64px 0; }
}

.logo-strip-lede {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-label-s);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--type-label-tracking);
  text-align: center;
  text-transform: uppercase;
  color: var(--kit-text-subtle);
}

.logo-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.logo-strip-row li { flex: none; }

.logo-strip-row img {
  display: block;
  height: auto;
  opacity: .8;
}

/* Below desktop the row wraps: centre it. */
@media (max-width: 1023.98px) {
  .logo-strip-row { justify-content: center; }
}

/* Phones: two or three per row at one height. */
@media (max-width: 599.98px) {
  .logo-strip-row { gap: 24px 32px; }
  .logo-strip-row img { width: auto; height: 18px; }
}


/* ---------- Form hero (pricing, Request a demo) ---------- */
/* A dark .hero-section--sandbox with the copy beside a white form card from
   1024px: add .form-hero to the section. Markup:
     section.hero-section--sandbox.form-hero > .l-container.form-hero-inner
       > .form-hero-copy (eyebrow, h1, .hero-desc, ul.hero-checks, .hero-proof)
       + .form-card (.form-card-title, .form-card-text, .mkto-form-wrap > form.mkto-form,
         .form-card-note)
   Moved from css/pricing.css (2026-10-13); the pricing page renders unchanged. */

/* Plain dark hero: no grid lines behind the form (Sonia, 2026-10-13). */
.form-hero::before,
.form-hero::after {
  content: none;
}

.form-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 64px;
}

@media (min-width: 600px) {
  .form-hero-inner { padding-top: 64px; padding-bottom: 80px; }
}

@media (min-width: 1024px) {
  .form-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    column-gap: 64px;
    align-items: start;
    padding-top: 96px;
    padding-bottom: 128px;
  }
}

/* Stacked (below 1024): the form comes straight after the checklist and the
   proof row moves under it, so the form starts sooner on phones. */
@media (max-width: 1023.98px) {
  .form-hero-copy { display: contents; }
  .form-hero-inner > * { grid-column: 1; }
  .form-hero-inner { row-gap: 0; }
  .form-card { order: 1; margin-top: 40px; }
  .hero-proof { order: 2; }
}

/* A form leads the page: H1 Compact (css/type.css). */
.form-hero .hero-title {
  margin: 20px 0 0;
  font-size: var(--type-h1-compact);
  text-wrap: balance;
}

.form-hero .hero-desc {
  max-width: 560px;
  margin: 20px 0 0;
}

.hero-checks {
  display: grid;
  gap: 12px;
  max-width: 560px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

.hero-checks li {
  position: relative;
  padding-left: 28px;
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: rgba(255, 255, 255, .78);
}

/* Citron tick, as in the homepage hero's gate checklists. */
.hero-checks li::before {
  content: "";
  position: absolute;
  top: .45em;
  left: 2px;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--kit-citron-highlight);
  border-bottom: 2px solid var(--kit-citron-highlight);
  transform: rotate(-45deg);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px 48px;
  max-width: 560px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(201, 254, 255, .14);
}

.hero-proof p {
  margin: 0;
  font-size: var(--type-small);
  line-height: 1.4;
  color: rgba(255, 255, 255, .78);
}

.hero-proof-stat strong {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--kit-citron-highlight);
}

.hero-proof-g2 {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 240px;
}

.hero-proof-g2 img {
  flex: none;
  width: 72px;
  height: auto;
}

/* Form card */

.form-card {
  padding: 24px;
  border: 1px solid rgba(32, 31, 29, .12);
  border-radius: 12px;
  background: var(--kit-white);
  box-shadow: var(--kit-elevation-1);
  color: var(--kit-text-strong);
}

@media (min-width: 600px) {
  .form-card { padding: 40px; }
}

.form-card-title {
  margin: 0;
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: var(--type-h3-lh);
  letter-spacing: -.02em;
}

.form-card-text {
  margin: 8px 0 0;
  font-size: var(--type-body);
  line-height: var(--type-body-lh);
  color: rgba(32, 31, 29, .7);
}

.form-card-note {
  margin: 20px 0 0;
  font-size: var(--type-caption);
  line-height: var(--type-body-lh);
  color: var(--kit-text-subtle);
}

/* Marketo forms (their markup; js/site.js strips their theme). Fields as the
   homepage's Connect field: 40px, 4px radius, 14px text; the submit is a lead
   CTA (44px, 15px Medium, 8px radius). Each page sets --form-min-height on
   .mkto-form-wrap to its form's height, so the card keeps its size while the
   form script loads. */
.mkto-form-wrap {
  min-height: var(--form-min-height, 0);
  margin-top: 28px;
}

.mkto-form-wrap.is-sending {
  display: flex;
  align-items: center;
  font-size: var(--type-lede);
}

.mkto-form {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
}

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

.mkto-form :is(.mktoFormRow, .mktoFieldDescriptor, .mktoFormCol, .mktoFieldWrap, .mktoButtonRow, .mktoButtonWrap) {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.mkto-form :is(.mktoOffset, .mktoGutter, .mktoClear) {
  display: none;
}

.mkto-form .mktoFormRow + .mktoFormRow .mktoFieldWrap {
  margin-top: 18px;
}

/* Hidden-field rows (UTMs) take no space. */
.mkto-form .mktoFormRow:has(input[type="hidden"]),
.mkto-form .mktoFormRow:has(input[type="hidden"]) .mktoFieldWrap {
  margin: 0;
}

/* "First name *": Marketo puts the asterisk first; show it after the text. */
.mkto-form .mktoLabel {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 3px;
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--kit-text-strong);
}

.mkto-form .mktoAsterix {
  float: none;
  padding: 0;
  color: var(--kit-text-subtle);
}

.mkto-form :is(input.mktoField, select.mktoField, textarea.mktoField) {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--kit-stroke-light);
  border-radius: 4px;
  background-color: var(--kit-white);
  font: 400 14px/1.2 var(--font-sans);
  color: var(--kit-text-strong);
  box-shadow: none;
}

.mkto-form .mktoField::placeholder {
  color: var(--kit-ivory-shade);
}

.mkto-form select.mktoField {
  appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23201F1D'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
}

.mkto-form .mktoField:focus-visible {
  outline: 2px solid var(--kit-teal-medium);
  outline-offset: 1px;
}

.mkto-form .mktoButtonRow {
  margin-top: 24px;
}

.mkto-form .mktoButton {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 8px;
  background: var(--kit-teal-shade);
  font: 500 15px/1.1 var(--font-sans);
  color: var(--kit-white);
  cursor: pointer;
  transition: background-color .15s ease;
}

.mkto-form .mktoButton:hover {
  background: var(--kit-teal-dark);
}

.mkto-form .mktoButton:focus-visible {
  outline: 2px solid var(--kit-teal-medium);
  outline-offset: 2px;
}

.mkto-form .mktoError {
  position: static;
  margin-top: 6px;
}

.mkto-form .mktoErrorArrowWrap {
  display: none;
}

.mkto-form .mktoErrorMsg {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 13px;
  line-height: 1.4;
  color: #B42318;
  text-shadow: none;
}

/* ---------- Frame and numbered grid (pricing, Request a demo) ---------- */
/* A 12px frame with one 12% hairline, as the homepage's industries cards;
   add .st-corners inside for the corner marks. .frame-grid is a list of white
   cells whose 1px gaps show the frame's line: a mono .frame-num, an h3 and a
   line of text per cell. One column on phones; .frame-grid--4 is two columns
   from 600px and four from 1024px, .frame-grid--3 three from 1024px. */

.frame {
  --frame-line: rgba(32, 31, 29, .12);
  position: relative;
  border: 1px solid var(--frame-line);
  border-radius: 12px;
  background: var(--kit-white);
}

.frame-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: 11px;
  overflow: hidden;
  background: var(--frame-line);
}

@media (min-width: 600px) {
  .frame-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .frame-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .frame-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.frame-grid > li {
  padding: 24px;
  background: var(--kit-white);
}

@media (min-width: 1024px) {
  .frame-grid > li { padding: 32px; }
}

.frame-num {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-label-s);
  font-weight: 500;
  letter-spacing: var(--type-label-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--kit-teal-medium);
}

.frame-grid h3 {
  margin: 24px 0 0;
  font-size: var(--type-h4);
  font-weight: 500;
  line-height: var(--type-h4-lh);
  letter-spacing: -.01em;
}

.frame-grid h3 + p {
  margin: 10px 0 0;
  font-size: var(--type-small);
  line-height: var(--type-body-lh);
  color: var(--kit-text-medium);
}