/* Home D page styles. Linked only from src/pages/nn/homepage/home-d.astro. */

/* The headline is two deliberate lines at desktop widths; the template's
   700px column wrapped it into four. On phones the break is dropped and the
   line wraps naturally. */
.hero-1-content-holder, .hero-1-text-wrapper, .hero-1-title-wrapper { max-width: 1100px; }
.hero-title { max-width: 1020px; }
@media (max-width: 767px) { .hero-title br { display: none; } }

/* The closing call to action follows a dark section on this page, so it needs
   its own breathing room above the card. */
.nn-d-cta { padding-top: 96px; }
@media (max-width: 767px) { .nn-d-cta { padding-top: 56px; } }

/* "Someone has to run the robots." reads as one line on desktop. */
@media (min-width: 992px) {
  .feature-2-header-wrapper, .feature-2-header-wrapper .section-title { max-width: none !important; }
  .feature-2-header-wrapper .section-title { white-space: nowrap; }
}

/* ---- visuals (built by scripts/home-visuals.mjs) --------------------------
   Compositions on a 520 x 400 artboard, placed in percent. Soft brand ground,
   white tiles for real product logos, round staff faces, and motion that
   stays small: dashes flowing along the connectors and checks arriving in
   sequence. No scaling and no rotation. */
.la-vis { position: relative; width: 100%; aspect-ratio: 13 / 10; overflow: hidden; border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 40%, #FFFFFF 0%, #F3F5FE 55%, #E9EDFC 100%); }
.la-vis::before { content: ""; position: absolute; inset: 0; opacity: .55;
  background-image: radial-gradient(#D5DCF8 1px, transparent 1px); background-size: 18px 18px; }
.feature-2-image-wrapper:has(> .la-vis) { background: transparent !important; padding: 0 !important; }
.la-vis > * { position: absolute; transform: translate(-50%, -50%); }
.la-vis > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
.la-v-lines path { fill: none; stroke: #536ee5; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 9; opacity: .75;
  animation: la-v-flow 1.4s linear infinite; vector-effect: non-scaling-stroke; }
.la-v-lines--ask path { stroke: #E0A33A; }
@keyframes la-v-flow { to { stroke-dashoffset: -22; } }
.la-v-tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: #FFFFFF;
  border: 1px solid #E4E9F5; border-radius: 22%; box-shadow: 0 10px 24px -14px rgba(35, 42, 80, .35); }
.la-v-tile img { width: 56%; height: 56%; object-fit: contain; }
.la-v-face { aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff;
  border: 4px solid #FFFFFF; box-shadow: 0 16px 34px -18px rgba(35, 42, 80, .55); }
.la-v-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.la-v-face--hero { border-width: 6px; box-shadow: 0 0 0 10px rgba(83, 110, 229, .12), 0 22px 44px -20px rgba(35, 42, 80, .6); }
.la-v-face--human { background: #FFFFFF; }
.la-v-badge { width: 7%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #FFFFFF; opacity: 0;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); animation: la-v-arrive 4.8s ease-out infinite; }
.la-v-badge--ok { background: #22A06B url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.2 4.5-4.8' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat; }
.la-v-badge--ask { background: #E0A33A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.3 4.4a1.8 1.8 0 1 1 2.6 1.6c-.6.3-.9.7-.9 1.3' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='9.3' r='.9' fill='%23fff'/%3E%3C/svg%3E") center / 70% no-repeat; }
@keyframes la-v-arrive { 0% { opacity: 0; margin-top: 8px; } 10%, 82% { opacity: 1; margin-top: 0; } 100% { opacity: 0; margin-top: 0; } }
  box-shadow: 0 12px 26px -12px rgba(83, 110, 229, .9); animation: la-v-bob 3.2s ease-in-out infinite; }
  font-family: var(--brand-font-heading); font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.la-v-orbits ellipse { fill: none; stroke: #C9D3F7; stroke-width: 1.6; stroke-dasharray: 3 8; vector-effect: non-scaling-stroke; animation: la-v-flow 3s linear infinite; }
.la-v-mark { width: 20%; aspect-ratio: 1; border-radius: 50%; background: #FFFFFF; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 12px rgba(83, 110, 229, .1), 0 20px 40px -18px rgba(35, 42, 80, .5); }
.la-v-mark img { width: 58%; height: 58%; object-fit: contain; }
.la-vis--constellation { aspect-ratio: 1.1; background: radial-gradient(90% 80% at 50% 50%, #FFFFFF 0%, #F1F4FE 60%, #E6EBFC 100%); }
.cta-3-image-wrapper:has(> .la-vis) { background: transparent !important; }
@media (prefers-reduced-motion: reduce) {
  .la-v-lines path, .la-v-orbits ellipse { animation: none; }
  .la-v-badge { animation: none; opacity: 1; }
}

/* In the runway cards the visual fills the whole image slot. */
.feature-2-image-wrapper > .la-vis { height: 100%; aspect-ratio: auto; min-height: 260px; }
@media (max-width: 991px) { .la-vis.hide-tablet { display: none; } }


/* Single-SVG visuals (scripts/home-visuals-2.mjs). Each is drawn on the same
   520 x 400 artboard and scales as a unit, centred in the card. */
.la-vis--art > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: none; }
.la-v-sign { stroke-dasharray: 100; stroke-dashoffset: 100; animation: la-v-sign 5s ease-in-out infinite; }
@keyframes la-v-sign { 0%, 6% { stroke-dashoffset: 100; } 36%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.la-v-stamp { opacity: 0; animation: la-v-stamp 5s ease-out infinite; }
@keyframes la-v-stamp { 0%, 38% { opacity: 0; } 44%, 88% { opacity: 1; } 100% { opacity: 0; } }
.la-v-mail { opacity: 0; animation: la-v-mail 5s ease-out infinite; }
@keyframes la-v-mail { 0%, 46% { opacity: 0; translate: -18px 16px; } 56%, 86% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 10px -8px; } }
.la-v-trail { animation: la-v-flow 1.4s linear infinite; }
.la-v-lens { animation: la-v-lens 7s ease-in-out infinite; }
@keyframes la-v-lens { 0%, 6% { translate: 0 0; } 28%, 46% { translate: 0 84px; } 70%, 76% { translate: 0 168px; } 100% { translate: 0 0; } }
.la-v-flag { animation: la-v-flag 7s linear infinite; }
@keyframes la-v-flag { 0%, 36% { opacity: 1; } 40%, 94% { opacity: 0; } 100% { opacity: 1; } }
.la-v-fixed { opacity: 0; animation: la-v-fixed 7s linear infinite; }
@keyframes la-v-fixed { 0%, 36% { opacity: 0; } 40%, 94% { opacity: 1; } 100% { opacity: 0; } }
.la-v-live { animation: la-v-live 1.6s ease-in-out infinite; }
@keyframes la-v-live { 50% { opacity: .35; } }
.la-v-leave { animation: la-v-leave 6s ease-in-out infinite; }
@keyframes la-v-leave { 0%, 30% { opacity: 1; } 42%, 86% { opacity: .28; } 100% { opacity: 1; } }
.la-v-x { opacity: 0; animation: la-v-x 6s ease-in-out infinite; }
@keyframes la-v-x { 0%, 22% { opacity: 0; } 28%, 86% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .la-v-sign { animation: none; stroke-dashoffset: 0; }
  .la-v-stamp, .la-v-mail, .la-v-fixed, .la-v-x { animation: none; opacity: 1; }
  .la-v-flag { animation: none; opacity: 0; }
  .la-v-lens, .la-v-trail, .la-v-live, .la-v-leave { animation: none; }
}

/* Staff portraits: the frame itself is the circle. sections.css rounds every
   bot-art wrapper to 14px with a higher-specificity selector, so this one is
   scoped to the list item to win. The image is not rounded separately. */
.agent-3-collection-item .agent-3-image-wrapper { border-radius: 50% !important; overflow: hidden; background: transparent !important;
  padding: 0 !important; box-shadow: none !important; }
.agent-3-collection-item .agent-3-image-wrapper .agent-3-image { object-fit: cover !important; object-position: center !important; border-radius: 0 !important; }

/* FAQ: a narrower portrait crop on David, so the questions get room. */
@media (min-width: 992px) {
  .faq-1-grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1fr) !important; column-gap: 72px !important; }
  .faq-image-holder { aspect-ratio: 4 / 5; min-height: 0 !important; height: auto !important; }
  .faq-image { height: 100% !important; object-position: 80% 35% !important; }
}