/* D4 Networks site chrome, ported verbatim from the design prototype.
   The dc runtime's style-hover attributes become the .d4-* hover rules here. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  background: #ffffff;
  color: #161616;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }

/* Reveal animation (shared) */
@media (prefers-reduced-motion: no-preference) {
  .d4-reveal { animation: d4rise 600ms cubic-bezier(0.2,0,0.38,0.9) both; }
}
@keyframes d4rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Utility ribbon */
.d4-util a { text-decoration: none; color: #c6c6c6; }
.d4-util a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }

/* Top nav */
.d4-navlink {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  font-size: 14px;
  letter-spacing: 0.16px;
  color: #161616;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.d4-navlink:hover { background: #f4f4f4; }
.d4-navlink.active { border-bottom-color: #0f62fe; }
.d4-nav-cta:hover { color: #0f62fe; }
a[data-ul]:hover { text-decoration: underline !important; text-underline-offset: 2px; }

/* Nav dropdowns */
.d4-dd { position: relative; height: 100%; display: inline-flex; }
.d4-dd > button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 16px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: 0.16px;
  color: #161616;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  outline: none;
  cursor: pointer;
}
.d4-dd > button:hover { background: #f4f4f4; }
.d4-dd.active > button { border-bottom-color: #0f62fe; }
.d4-dd-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 250px; background: #ffffff; border: 1px solid #e0e0e0; z-index: 30; }
.d4-dd:hover > .d4-dd-menu, .d4-dd:focus-within > .d4-dd-menu { display: block; }
.d4-dd-item { display: block; padding: 13px 16px; text-decoration: none; border-top: 1px solid #e0e0e0; }
.d4-dd-item:first-child { border-top: 0; }
.d4-dd-item:hover { background: #f4f4f4; }
.d4-dd-t { display: block; font-size: 14px; letter-spacing: 0.16px; color: #161616; }
.d4-dd-item:hover .d4-dd-t { color: #0f62fe; }
.d4-dd-s { display: block; font-size: 12px; letter-spacing: 0.16px; color: #6f6f6f; margin-top: 2px; }

/* Burger + mobile menu */
.d4-burger { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; cursor: pointer; padding: 0; }
.d4-burger:hover { background: #f4f4f4; }
.d4-mlink { display: block; padding: 15px 24px; font-size: 16px; letter-spacing: 0.16px; color: #161616; text-decoration: none; border-top: 1px solid #e0e0e0; }
.d4-mlink:hover { background: #f4f4f4; }
.d4-mlink.util { font-size: 14px; color: #525252; }

/* Logo swap */
.d4-logo-full { height: 34px; display: block; }
.d4-logo-glyph { height: 30px; display: none; }
@media (max-width: 672px) {
  .d4-logo-full { display: none; }
  .d4-logo-glyph { display: block; }
}

@media (max-width: 900px) {
  .d4-navlinks { display: none !important; }
  .d4-nav-desk { display: none !important; }
  /* Pull the 44px tap target toward the edge so the icon sits ~16px from the
     screen edge (a touch tighter than the logo's 24px inset). */
  .d4-burger { display: inline-flex; margin-right: -20px; }
  .d4-util { display: none !important; }
}
@media (min-width: 901px) {
  .d4-mobile-menu { display: none !important; }
}

/* Footer */
.d4-foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .d4-foot { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .d4-foot { grid-template-columns: 1fr; } }
.d4-flink { display: block; font-size: 14px; letter-spacing: 0.16px; color: #8d8d8d; text-decoration: none; padding: 7px 0; }
.d4-flink:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.d4-flink-inline { font-size: 13px; letter-spacing: 0.16px; color: #8d8d8d; text-decoration: none; }
.d4-flink-inline:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }

/* Bordered hover card (shared across pages) */
.d4-card .b { position: absolute; background: #0f62fe; pointer-events: none; }
.d4-card .b-top { top: 0; left: 0; height: 2px; width: 0; transition: width 0.2s cubic-bezier(0.2,0,0.38,0.9) 0s; }
.d4-card .b-right { top: 0; right: 0; width: 2px; height: 0; transition: height 0.2s cubic-bezier(0.2,0,0.38,0.9) 0.2s; }
.d4-card .b-left { top: 0; left: 0; width: 2px; height: 0; transition: height 0.2s cubic-bezier(0.2,0,0.38,0.9) 0s; }
.d4-card .b-bottom { bottom: 0; left: 0; height: 2px; width: 0; transition: width 0.2s cubic-bezier(0.2,0,0.38,0.9) 0.2s; }
.d4-card:hover { background: #f4f4f4; }
.d4-card:hover .b-top { width: 100%; }
.d4-card:hover .b-right { height: 100%; }
.d4-card:hover .b-left { height: 100%; }
.d4-card:hover .b-bottom { width: 100%; }
.d4-card:not(:hover) .b { transition-delay: 0s; transition-duration: 0.2s; }
@media (prefers-reduced-motion: reduce) { .d4-card .b { transition: none; } }

/* DS Button (ported from components/core/Button.jsx) */
.ds-btn {
  font-family: var(--font-family);
  font-size: var(--type-button-size);
  font-weight: var(--type-button-weight);
  letter-spacing: var(--type-button-spacing);
  line-height: var(--type-button-line);
  padding: 12px 16px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--radius-none);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  text-decoration: none;
  transition: background 70ms cubic-bezier(0,0,0.38,0.9), border-color 70ms;
  box-sizing: border-box;
  width: fit-content;
}
.ds-btn--sm { padding: 8px 16px; min-height: 40px; }
.ds-btn--lg { padding: 16px 16px; min-height: 56px; }
.ds-btn--primary { background: var(--colors-primary); color: var(--colors-on-primary); }
.ds-btn--primary:hover { background: var(--colors-blue-hover); }
.ds-btn--secondary { background: var(--colors-ink); color: var(--colors-inverse-ink); }
.ds-btn--secondary:hover { background: #393939; }
.ds-btn--tertiary { background: transparent; color: var(--colors-primary); border-color: var(--colors-primary); }
.ds-btn--tertiary:hover { background: rgba(15,98,254,0.08); }
.ds-btn--ghost { background: transparent; color: var(--colors-primary); justify-content: flex-start; }
.ds-btn--ghost:hover { background: rgba(15,98,254,0.08); }
.ds-btn--danger { background: var(--colors-semantic-error); color: var(--colors-on-primary); }
.ds-btn--danger:hover { background: #ba1b23; }

/* DS Icon wrapper */
.ds-icon { display: inline-flex; align-items: center; justify-content: center; }
.ds-icon svg { width: 100%; height: 100%; display: block; }