/* Nue Technology — shared site styles
   Base visual language is applied inline per-element (mirroring the source
   design canvas exactly). This stylesheet only carries what inline styles
   cannot express: hover states, the marquee keyframe, and the responsive
   layer (grid collapse + nav wrap) below 860px. */

:root {
  --navy: #0B1B3F;
  --blue: #1B3FA0;
  --blue-hover: #1247B5;
  --ink-soft: #4A5875;
  --ink-faint: #6B7A99;
  --line: #E3E9F5;
  --surface: #F4F7FC;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--navy);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }

button { font-family: inherit; border: none; background: none; cursor: pointer; }

img { max-width: 100%; }

@keyframes nue-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Hover states (can't be expressed inline) ---------- */

.nav-link { color: var(--ink-soft); }
.nav-link:hover { color: var(--navy); }

.btn-dark { background: var(--navy); color: #FFFFFF; }
.btn-dark:hover { background: var(--blue); }

.btn-light { background: #FFFFFF; color: var(--navy); }
.btn-light:hover { background: #DCE5F8; }

.btn-outline { border: 1px solid var(--line); background: transparent; color: var(--navy); }
.btn-outline:hover { border-color: var(--navy); }

.btn-outline-dark { border: 1px solid #2E3A5C; background: transparent; color: #FFFFFF; }
.btn-outline-dark:hover { border-color: #FFFFFF; }

.link-caps { color: var(--blue); }
.link-caps:hover { color: var(--blue-hover); }

.card-hover:hover { background: var(--surface); }

.cell-hover:hover { background: var(--surface); }

.footer-link { color: var(--ink-soft); }
.footer-link:hover { color: var(--blue); }

.faq-q:hover { color: var(--blue); }

/* ---------- Contact page: Tally embed + fallback ---------- */

.form-error { display: none; }
.form-error.is-visible { display: block; }
.tally-wrap { position: relative; }
.tally-wrap.is-hidden { display: none; }

/* Shown by default; covers the blank iframe until Tally's content has
   actually rendered inside it (see the inline script in pages/contact.js),
   so a visitor never just sees empty white space while it loads. */
.tally-loader {
  position: absolute;
  inset: 8px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #FFFFFF;
  border-radius: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  transition: opacity 0.2s ease;
}
.tally-loader.is-hidden { opacity: 0; pointer-events: none; }
.tally-spinner {
  width: 20px;
  height: 20px;
  border: 3px solid var(--line);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: tally-spin 0.7s linear infinite;
}
@keyframes tally-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tally-spinner { animation-duration: 1.6s; }
}

/* ---------- FAQ accordion (native <details>, no JS needed) ---------- */

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .faq-sign::before { content: "+"; }
.faq-item[open] .faq-sign::before { content: "\2013"; }
.faq-item .faq-a { padding: 0 60px 28px 0; max-width: 700px; }

/* ---------- Responsive grid collapse ---------- */

.g-2, .g-3, .g-4, .g-5, .g-6,
.g-side, .g-side-wide,
.g-hero-home, .g-hero,
.g-pair, .g-pair-a, .g-pair-b,
.g-detail3, .g-list, .g-list-hello,
.g-footer {
  display: grid;
}
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-5 { grid-template-columns: repeat(5, 1fr); }
.g-6 { grid-template-columns: repeat(6, 1fr); }
.g-side { grid-template-columns: 320px 1fr; }
.g-side-wide { grid-template-columns: 380px 1fr; }
.g-hero-home { grid-template-columns: 1.08fr 0.92fr; }
.g-hero { grid-template-columns: 1.05fr 0.95fr; }
.g-pair { grid-template-columns: 1fr 1fr; }
.g-pair-a { grid-template-columns: 1.15fr 1fr; }
.g-pair-b { grid-template-columns: 1.25fr 1fr; }
.g-detail3 { grid-template-columns: 330px 1fr 300px; }
.g-list { grid-template-columns: 1fr 1.5fr; }
.g-list-hello { grid-template-columns: 1fr 1.6fr; }
.g-footer { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

/* Grid items default to min-width: auto, which lets a replaced element
   (an <img> in particular) force its column wider than the track's fr
   size — the image then spills out past its card instead of scaling
   down. Zeroing min-width on every direct grid child lets width: 100%
   on images actually apply. */
.g-2 > *, .g-3 > *, .g-4 > *, .g-5 > *, .g-6 > *,
.g-side > *, .g-side-wide > *,
.g-hero-home > *, .g-hero > *,
.g-pair > *, .g-pair-a > *, .g-pair-b > *,
.g-detail3 > *, .g-list > *, .g-list-hello > *,
.g-footer > * {
  min-width: 0;
}

.site-header-row {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  height: 76px;
}

.site-nav {
  display: flex;
  gap: clamp(16px, 2.2vw, 32px);
  margin-left: auto;
  align-items: center;
}

@media (max-width: 860px) {
  .g-2, .g-3, .g-4, .g-5, .g-6,
  .g-side, .g-side-wide,
  .g-hero-home, .g-hero,
  .g-pair, .g-pair-a, .g-pair-b,
  .g-detail3, .g-list, .g-list-hello {
    grid-template-columns: 1fr !important;
  }
  .g-footer { grid-template-columns: 1fr 1fr; row-gap: 32px; }

  .site-header-row { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 14px; }
  .site-nav { margin-left: 0; flex-wrap: wrap; row-gap: 10px; width: 100%; order: 3; justify-content: flex-start; }

  .g-detail3 > div:nth-child(3) { border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--line); padding-top: 24px; }
  .g-side, .g-side-wide { row-gap: 24px; }
}

@media (max-width: 560px) {
  .g-footer { grid-template-columns: 1fr; }
}