@import './tokens.css';
@import './base.css';
@import './marketing-mobile.css';
@import './components/button.css';
@import './components/navbar.css?v=header-20260626';
@import './components/footer.css';

/* /contact: Try Larridin. White ground, hairline frames, indigo selections, lime only on the submit. */
.page-contact { --ct-acc: #D6F32F; --ct-acc-ink: #14113F; --ct-ink: #1b242c; --ct-muted: #6b7585; --ct-muted2: #4a545e; --ct-indigo: #4C45C0; --ct-lav: #eeedfe; --ct-hair: #E1E4EA; --ct-hair-soft: #EDEFF2; --ct-band: #F6F7F9; --ct-ctl: #CFD6DD; }

.ct { padding-block: 96px 120px; background: #ffffff; color: var(--ct-ink); }
.ct__grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 96px; align-items: start; }
.ct__left { display: flex; flex-direction: column; gap: 40px; padding-top: 16px; min-width: 0; }
.ct__title { max-width: 560px; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero); line-height: var(--leading-hero); letter-spacing: var(--tracking-display); color: var(--ct-ink); text-wrap: balance; }
.ct__title em { color: var(--ct-indigo); font-style: normal; }

.ct__trust { display: flex; flex-direction: column; gap: 22px; }
.ct__label { margin: 0; font-size: 14px; line-height: 1.4; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ct-muted2); }
.ct__logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 26px 32px; }
.ct__logos img { display: block; max-height: 26px; max-width: 100%; width: auto; height: auto; filter: grayscale(1); opacity: 0.8; }

.ct__ent { display: flex; flex-direction: column; gap: 14px; padding-top: 28px; border-top: 1px solid var(--ct-hair-soft); }
.ct__eyebrow { margin: 0; font-size: var(--text-caption); line-height: 1.4; font-weight: 500; letter-spacing: 0.96px; text-transform: uppercase; color: var(--ct-indigo); }
.ct__ent-title { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 500; letter-spacing: -0.3px; color: var(--ct-ink); }
.ct__strip { border: 1px solid var(--ct-hair); background: var(--ct-band); }
.ct__row { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ct__row--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct__row + .ct__row { border-top: 1px solid var(--ct-hair); }
.ct__tile { padding: 16px 18px 15px; border-left: 1px solid var(--ct-hair); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ct__tile:first-child { border-left: 0; }
.ct__tile dt { font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -0.3px; color: var(--ct-ink); }
.ct__tile dd { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ct-muted); }

.ct__card { background: #ffffff; border: 1px solid var(--ct-hair); box-shadow: 0 30px 60px -30px rgba(27, 36, 44, 0.22), 0 2px 6px rgba(27, 36, 44, 0.04); padding: 36px 40px 40px; }
.ct__card-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.ct__form { position: relative; min-height: 420px; }
.ct__loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 14px; color: var(--ct-muted); background: #ffffff; }
.ct__loading[hidden] { display: none; }
.ct__spinner { width: 28px; height: 28px; border: 3px solid var(--ct-lav); border-top-color: var(--ct-indigo); border-radius: 50%; animation: ct-spin 0.8s linear infinite; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ct__spinner { animation-duration: 2.4s; } }
.ct__card-title { margin: 0; font-family: var(--font-sans); font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -0.36px; color: var(--ct-ink); }
.ct__card-sub { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ct-muted); }


.ct__fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ct-muted); text-align: center; }

@media (max-width: 1100px) {
  .ct__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  /* Stacked layout leads with the form; the headline, logos and enterprise strip follow. */
  .ct__card { max-width: 640px; order: -1; }
}
@media (max-width: 640px) {
  .ct { padding-block: 24px 72px; }
  .ct__card { padding: 24px 20px 28px; }
  .ct__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 24px; }
  .ct__row, .ct__row--two { grid-template-columns: minmax(0, 1fr); }
  .ct__tile { border-left: 0; }
  .ct__tile + .ct__tile { border-top: 1px solid var(--ct-hair); }
}

/* Dark header: the same treatment as the home and Developer Intelligence pages (from sections/home-v4/shared.css),
   on its own indigo band because this page starts white. */
.page-contact { --v4-highlight: #c9c4ff; --v4-ink: #1b242c; --color-accent: #D6F32F; --color-accent-ink: #14113F; }

.page-contact .site-header { position: sticky; top: 0; background: linear-gradient(180deg, #1a1560 0%, #241e7a 100%); border-bottom: 0; }
.page-contact .header-announcement { display: none; }
.page-contact .navbar { min-height: 60px; }
.page-contact .navbar__logo-img { content: url('/assets/img/logo-footer.webp'); }
.page-contact .navbar__trigger,
.page-contact .navbar__nav--desktop a { color: var(--color-white); }
.page-contact .navbar__trigger:hover,
.page-contact .navbar__item--open .navbar__trigger { background: transparent; color: var(--v4-highlight); }
.page-contact .navbar__chevron { color: currentColor; }
.page-contact .navbar__menu-toggle { color: var(--color-white); }
.page-contact .navbar__cta--desktop .btn { background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.22); color: var(--color-white); }
.page-contact .navbar__cta--desktop .btn:hover { background: rgba(255, 255, 255, 0.2); }
.page-contact .navbar__submenu,
.page-contact .navbar__drawer { color: var(--v4-ink); }
.page-contact .navbar__nav--desktop .navbar__submenu-link,
.page-contact .navbar__nav--desktop .navbar__mega-item,
.page-contact .navbar__nav--desktop .navbar__mega-header,
.page-contact .navbar__nav--desktop .navbar__mega-footer,
.page-contact .navbar__mobile-trigger,
.page-contact .navbar__mobile-link,
.page-contact .navbar__mobile-back,
.page-contact .navbar__drawer-close { color: var(--v4-ink); }
.page-contact .navbar__signin { padding: 0 8px; color: rgba(255, 255, 255, 0.85); font-size: var(--text-secondary); font-weight: 500; }
.page-contact .navbar__signin:hover { color: #ffffff; }
@media (min-width: 901px) { .page-contact .navbar__cta--desktop { display: flex; align-items: center; gap: 12px; } }
.page-contact .navbar__cta--desktop .btn { padding: 10px 20px; border-radius: 0; }
.page-contact .navbar__cta--desktop .btn svg { margin-left: 8px; }
.page-contact .navbar .btn.btn--inverse, .page-contact .navbar__drawer-cta .btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.page-contact .navbar .btn.btn--inverse:hover, .page-contact .navbar__drawer-cta .btn--primary:hover { background: var(--color-accent); border-color: var(--color-accent-ink); color: var(--color-accent-ink); opacity: 1; }