/* =============================================================
   Liquid Thought — Site styles
   Single stylesheet, mobile-first, 768px breakpoint
   ============================================================= */

/* -------------------- Tokens -------------------- */
:root {
  /* Brand (preserved from legacy) */
  --c-brand:        #75B0F0;   /* Primary, also Safari outer surround */
  --c-brand-dark:   #003399;
  --c-brand-mid:    #276BBA;
  --c-accent:       #006666;
  --c-accent-light: #91D4BD;

  /* Surfaces */
  --c-page:    #ffffff;        /* Mobile/tablet body bg — matches the canvas so
                                  no visible seam when the canvas is full-width.
                                  At ≥1180px the brand-blue surround is restored. */
  --c-bg:      #ffffff;        /* Site canvas */
  --c-bg-soft: #f4f8fd;        /* Subtle section bg */
  --c-bg-elevated: #ffffff;
  --c-border:  #d8e2ef;
  --c-border-soft: #eaf0f8;

  /* Text */
  --c-text:      #11243f;
  --c-text-soft: #5b6e85;
  --c-text-mute: #8095ad;
  --c-link:      #003399;
  --c-link-hover:#006666;

  /* Effects */
  --shadow-sm: 0 2px 6px rgba(0, 30, 110, .10), 0 1px 2px rgba(0, 30, 110, .06);
  --shadow-md: 0 14px 36px rgba(0, 30, 110, .20), 0 4px 10px rgba(0, 30, 110, .10);
  --shadow-lg: 0 28px 72px rgba(0, 30, 110, .26), 0 8px 18px rgba(0, 30, 110, .12);

  /* Radii */
  --radius-pill: 999px;
  --radius-md:   14px;
  --radius-lg:   22px;

  /* Type — system stack: San Francisco on Apple, Segoe UI on Windows, Roboto on Android */
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               Helvetica, Arial, "Segoe UI", sans-serif;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;
  --s-9: 96px;
  --s-10: 128px;

  --container: 1180px;
  --bp-md: 768px;

  --easing: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-page:        #0e1a2c;     /* matches canvas on mobile/tablet (no seam);
                                     desktop ≥1180px restores the dark gray surround. */
    --c-bg:          #0e1a2c;
    --c-bg-soft:     #16243a;
    --c-bg-elevated: #162540;
    --c-border:      #243a5b;
    --c-border-soft: #1a2c47;

    --c-text:        #eaf0f9;
    --c-text-soft:   #a6bbd1;
    --c-text-mute:   #7a90a9;

    --c-link:        #75B0F0;
    --c-link-hover:  #91D4BD;

    --shadow-sm: 0 2px 6px rgba(0, 0, 0, .45),  0 1px 2px rgba(0, 0, 0, .35);
    --shadow-md: 0 14px 36px rgba(0, 0, 0, .55), 0 4px 10px rgba(0, 0, 0, .35);
    --shadow-lg: 0 28px 72px rgba(0, 0, 0, .70), 0 8px 18px rgba(0, 0, 0, .40);
  }
}

/* -------------------- Reset / base -------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
figure { margin: 0; } /* drop the browser default 40px inline margins on <figure> */

a {
  color: var(--c-link);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover { color: var(--c-link-hover); text-decoration: underline; }

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-4);
  color: var(--c-text);
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 4.4vw + 0.6rem, 3.6rem); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 2vw + 0.8rem, 2.4rem); line-height: 1.15; }
h3 { font-size: clamp(1.15rem, 0.6vw + 1rem, 1.4rem); line-height: 1.25; }
h4 { font-size: 1rem; color: var(--c-text-soft); font-weight: 500; }

p { margin: 0 0 1em; }
.lead { font-size: 1.18rem; color: var(--c-text-soft); max-width: 60ch; }

hr.rule {
  border: 0;
  height: 1px;
  background: var(--c-border-soft);
  margin: var(--s-7) 0;
}

/* -------------------- Page shell -------------------- */
/* Single composite gradient layered behind every page. Multiple soft radial
   spots overlap so it reads as one continuous wash from top to bottom rather
   than two separate areas. The footer paints over it with a solid bg so the
   gradient appears to "stop" at the footer line. */
.canvas {
  background:
    radial-gradient(1100px 600px at 85% -8%,
       color-mix(in srgb, var(--c-brand) 28%, transparent), transparent 60%),
    radial-gradient(900px 700px at -10% 45%,
       color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%),
    radial-gradient(1000px 520px at 110% 100%,
       color-mix(in srgb, var(--c-brand) 22%, transparent), transparent 70%),
    var(--c-bg);
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  overflow: clip; /* keep the gradient within the rounded canvas bounds */
  /* No min-height — the canvas is content-driven so the footer hugs the content
     and the body's #75B0F0 surround shows below on short pages. */
}
@media (min-width: 1180px) {
  .canvas {
    margin-top: var(--s-5);
    margin-bottom: var(--s-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  /* Desktop only: restore the brand-blue surround behind the centered canvas. */
  :root { --c-page: #75B0F0; }
}
@media (min-width: 1180px) and (prefers-color-scheme: dark) {
  :root { --c-page: rgb(54, 52, 57); }
}
.container {
  width: min(100% - 2 * var(--s-5), 1080px);
  margin-inline: auto;
}
@media (min-width: 768px) {
  .container { width: min(100% - 2 * var(--s-7), 1080px); }
}

.section { padding: var(--s-8) 0; }
.section-tight { padding: var(--s-7) 0; }

.eyebrow {
  display: inline-block;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-brand-mid);
  font-weight: 600;
  margin-bottom: var(--s-3);
}
@media (prefers-color-scheme: dark) {
  .eyebrow { color: var(--c-brand); }
}

/* -------------------- Header / nav (Apple Museum style) -------------------- */
.site-header {
  position: sticky;
  top: 0;                           /* sticky offset is 0 — the visible gap above the
                                       pills comes entirely from padding-top, which
                                       matches padding-left/right for symmetric edges. */
  z-index: 70;                      /* sits above the overlay (60) so the X stays visible */
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-4) 0; /* mobile: top = sides = 16px */
  pointer-events: none;
}
/* When the overlay is open, hide the brand pill so only the X close button shows. */
body.nav-open .brand-pill,
body.nav-open .menu-pill,
body.nav-open .cta-pill { visibility: hidden; }
.site-header > * { pointer-events: auto; }

.pill {
  background: color-mix(in srgb, var(--c-bg) 85%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 var(--s-4);
  font-weight: 500;
}

.brand-pill {
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-text);
  white-space: nowrap;
}
.brand-pill:hover { text-decoration: none; color: var(--c-text); }
.brand-mark {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}
.brand-mark img {
  width: 100%; height: 100%;
  display: block;
}
.brand-name { font-weight: 600; letter-spacing: -0.01em; }

.menu-pill {
  display: none; /* shown ≥1024px where there's room for 7 links + brand + CTA */
  gap: var(--s-1);
  padding: 0 var(--s-1);   /* tight 4px side inset so the active pill's side gap
                              matches its top/bottom gap inside the menu pill */
}
.menu-pill a {
  color: var(--c-text-soft);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-weight: 500;
  font-size: .94rem;
  white-space: nowrap;   /* keep "About Us" on a single line */
  transition: background .2s var(--easing), color .2s var(--easing);
}
.menu-pill a:hover { background: var(--c-bg-soft); color: var(--c-text); text-decoration: none; }
.menu-pill a[aria-current="page"] {
  background: var(--c-brand-dark);
  color: #fff;
}
@media (prefers-color-scheme: dark) {
  .menu-pill a[aria-current="page"] {
    background: var(--c-brand);
    color: #0a1424;
  }
}

.spacer { flex: 1; }

.cta-pill {
  background: var(--c-brand-dark);
  color: #fff !important;
  padding: 0 var(--s-5);
  font-weight: 600;
  border: 0;
  display: none;
}
.cta-pill:hover {
  background: var(--c-accent);
  color: #fff;
  text-decoration: none;
}
@media (prefers-color-scheme: dark) {
  .cta-pill { background: var(--c-brand); color: #0a1424 !important; }
  .cta-pill:hover { background: var(--c-accent-light); }
}

.menu-toggle {
  width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-bg) 85%, transparent);
  border: 1px solid var(--c-border-soft);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  /* Stay above the overlay so it works as a close button on mobile */
  position: relative;
  z-index: 70;
  transition: background .2s var(--easing), border-color .2s var(--easing);
}

/* When the overlay is open, the toggle becomes the X close button. */
.menu-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.menu-toggle[aria-expanded="true"] .bars span {
  background: #fff;
}
.menu-toggle .bars {
  position: relative;
  width: 18px; height: 12px;
  display: inline-block;
}
.menu-toggle .bars span {
  position: absolute;
  left: 0; right: 0;
  height: 2px; border-radius: 2px;
  background: var(--c-text);
  transition: transform .25s var(--easing), top .25s var(--easing), opacity .2s;
}
.menu-toggle .bars span:nth-child(1) { top: 0; }
.menu-toggle .bars span:nth-child(2) { top: 5px; }
.menu-toggle .bars span:nth-child(3) { top: 10px; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1) {
  top: 5px; transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3) {
  top: 5px; transform: rotate(-45deg);
}

/* Layout/grid breakpoint — content adjusts at 768px */
@media (min-width: 768px) {
  .site-header  {
    padding: var(--s-5) var(--s-5) 0;               /* desktop: top = sides = 24px */
    /* top stays 0 from the base rule — padding alone creates the visible gap */
    gap: var(--s-3);
  }
}
/* Full pill-bar breakpoint — only kicks in once there's room for 7 links
   plus brand + Contact CTA without overflow. Below this the hamburger is used. */
@media (min-width: 1024px) {
  .menu-pill    { display: inline-flex; }
  .cta-pill     { display: inline-flex; }
  .menu-toggle  { display: none; }
}

/* Overlay menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  grid-template-rows: auto 1fr auto;
  pointer-events: none;
  visibility: hidden;
}
.nav-overlay.open { visibility: visible; pointer-events: auto; }
.nav-overlay__bg {
  position: absolute; inset: 0;
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--c-brand) 88%, #fff 12%),
    color-mix(in srgb, var(--c-brand-dark) 88%, #000 12%));
  opacity: 0;
  transition: opacity .35s var(--easing);
}
@media (prefers-color-scheme: dark) {
  .nav-overlay__bg {
    background: linear-gradient(160deg, #16243a, #0a1424);
  }
}
.nav-overlay.open .nav-overlay__bg { opacity: 1; }
.nav-overlay__inner {
  position: relative;
  display: grid; place-items: center;
  padding: var(--s-9) var(--s-5);
  transform: translateY(20px);
  opacity: 0;
  transition: transform .4s var(--easing) .05s, opacity .35s var(--easing) .05s;
}
.nav-overlay.open .nav-overlay__inner { transform: none; opacity: 1; }
.nav-overlay__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--s-4);
  text-align: center;
}
.nav-overlay__list a {
  display: inline-block;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--radius-md);
}
.nav-overlay__list a:hover {
  color: var(--c-accent-light);
  text-decoration: none;
}
.nav-overlay__list a[aria-current="page"] {
  color: var(--c-accent-light);
}
.nav-overlay__sub {
  margin: var(--s-6) 0 0;
  color: rgba(255,255,255,.78);
  font-size: .95rem;
  letter-spacing: .04em;
}
.nav-overlay__sub a { color: #fff; opacity: .9; }
.nav-overlay__sub a:hover { opacity: 1; }

/* prevent body scroll when menu open */
body.nav-open { overflow: hidden; }

/* -------------------- Hero -------------------- */
.hero {
  position: relative;
  padding: var(--s-7) 0 var(--s-8);
}
.hero h1 {
  max-width: 18ch;
}
.hero .lead { max-width: 56ch; margin-top: var(--s-4); }
.hero-actions { margin-top: var(--s-6); display: flex; gap: var(--s-3); flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: 48px;
  padding: 0 var(--s-5);
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform .15s var(--easing), background .2s var(--easing), color .2s var(--easing);
}
/* Small inline icon inside a button (e.g. playground download icon) */
.btn .btn-icon {
  width: 22px; height: 22px;
  display: inline-block;
  flex-shrink: 0;
}
.btn:hover { text-decoration: none; }
.btn-primary {
  background: var(--c-brand-dark);
  color: #fff;
}
.btn-primary:hover { background: var(--c-accent); color: #fff; }
.btn-ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-border);
}
.btn-ghost:hover { background: var(--c-bg-soft); color: var(--c-text); }
@media (prefers-color-scheme: dark) {
  .btn-primary { background: var(--c-brand); color: #0a1424; }
  .btn-primary:hover { background: var(--c-accent-light); color: #0a1424; }
}

.hero-figure {
  margin-top: var(--s-7);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--c-bg-soft);
}
.hero-figure img,
.hero-figure video { width: 100%; display: block; }

/* Hero with side-by-side text + figure (used on the home page) */
.hero-split {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: center;
  margin-top: var(--s-6);
}
@media (min-width: 768px) {
  .hero-split { grid-template-columns: 1.2fr 1fr; gap: var(--s-8); }
}
.hero-split .hero-figure { margin-top: 0; }
.hero-split .hero-figure img,
.hero-split .hero-figure video {
  aspect-ratio: 4 / 4.6;
  object-fit: cover;
  object-position: center;
}
/* The poster <img> fallback inside <video> sits on top of the video frame in
   browsers that ignore the source list (very rare); make it cover the same area. */
.hero-figure video > img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Reduced-motion pause is handled in site.js — CSS can't stop autoplaying video. */

/* -------------------- Generic content layout -------------------- */
.page-head {
  padding: var(--s-7) 0 var(--s-5);
}
.two-col {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .two-col { grid-template-columns: 2fr 1fr; }
}
/* Mobile: full-width rectangular banner, square source cropped top/bottom */
.two-col .vis {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  width: 100%;
  aspect-ratio: 16 / 9;
}
.two-col .vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Per-image focal points so the wider mobile crop preserves the subject */
.two-col .vis--top    img { object-position: center top; }   /* keeps heads in frame */
.two-col .vis--center img { object-position: center 60%; }   /* nudges focal point upward */
/* Desktop: tuck back to the right column at original square aspect */
@media (min-width: 768px) {
  .two-col .vis {
    aspect-ratio: 1 / 1;
    max-width: 280px;
    margin-left: auto;
    margin-right: 0;
  }
}

.prose p { color: var(--c-text); }
.prose p + p { margin-top: 1em; }
.prose h3 { margin-top: var(--s-7); }

/* -------------------- Cards & grids -------------------- */
.card-grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
}
.card {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);   /* subtle lift at rest */
  transition: transform .2s var(--easing), box-shadow .2s var(--easing), border-color .2s;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-border);
}
/* Anchor-cards (<a class="card">) — only underline the title on hover,
   not every text node inside the tile. The whole tile is still clickable. */
a.card,
a.card:hover { text-decoration: none; }
a.card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.card h3 { margin: 0; }
.card p  { color: var(--c-text-soft); margin: 0; }
.card .meta {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-brand-mid);
}
@media (prefers-color-scheme: dark) {
  .card .meta { color: var(--c-brand); }
}
.card .badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-soft);
  font-size: .78rem;
  color: var(--c-text-soft);
  width: max-content;
}

.card-art {
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-2);
  height: 180px;
  background: linear-gradient(135deg, var(--c-brand), var(--c-brand-mid));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .9rem;
  position: relative;
  overflow: hidden;
}
.card-art::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(120% 80% at 0% 100%, rgba(0, 102, 102, .35), transparent 70%);
}
.card-art .glyph { position: relative; font-size: 2rem; }

/* -------------------- Recent publications block -------------------- */
.recent-publications {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-5) var(--s-6);
}
.recent-publications h3 { margin: 0 0 var(--s-2); font-size: 1rem; color: var(--c-brand-mid); letter-spacing: .04em; text-transform: uppercase; }

/* -------------------- Team page bios -------------------- */
.bio { padding: var(--s-6) 0; border-bottom: 1px solid var(--c-border-soft); }
.bio:last-child { border-bottom: 0; }
.bio h3 { margin-bottom: 2px; }
.bio h4 { color: var(--c-accent); margin-bottom: var(--s-3); font-size: .92rem; font-weight: 500; }
.bio .more { display: none; }
.bio.is-open .more { display: block; }
.bio .more-toggle { color: var(--c-link); font-weight: 500; }
.bio .more-toggle:hover { text-decoration: underline; cursor: pointer; }

/* -------------------- Contact page -------------------- */
.contact-grid {
  display: grid; gap: var(--s-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: 1fr 1.2fr; }
}
.company-card {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
}
.company-card h3 { margin-top: 0; }
.company-card .row { color: var(--c-text-soft); margin: 2px 0; }

.form-card {
  background: var(--c-bg-elevated);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
/* After successful submission the form is removed; tighten the card so the
   confirmation message doesn't sit in a tall empty box. */
.form-card--compact { padding: var(--s-5) var(--s-6); }
.form-card--compact .form-success { margin: 0; }

.field { display: grid; gap: 6px; margin-bottom: var(--s-4); }
.field > label { font-size: .9rem; font-weight: 500; color: var(--c-text-soft); }
/* Text-style inputs only — radios/checkboxes get default rendering */
.field input:not([type="radio"]):not([type="checkbox"]),
.field textarea {
  appearance: none;
  font: inherit;
  color: var(--c-text);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .15s var(--easing), box-shadow .15s var(--easing), background .15s;
}
.field input:not([type="radio"]):not([type="checkbox"]):focus,
.field textarea:focus {
  outline: none;
  border-color: var(--c-brand-mid);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand) 28%, transparent);
}
.field textarea { min-height: 140px; resize: vertical; }

.radio-row {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.radio-row .radio {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: var(--c-text);
  white-space: nowrap;
  cursor: pointer;
}
.radio-row .radio input[type="radio"] {
  margin: 0;
  flex-shrink: 0;
}

.form-row {
  display: grid; gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}

.bot-trap {
  display: flex; gap: var(--s-3);
  align-items: center;
  background: var(--c-bg-soft);
  border: 1px dashed var(--c-border);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius-md);
  font-size: .92rem;
  color: var(--c-text-soft);
}
.bot-trap input {
  width: 70px; padding: 8px 10px;
  border: 1px solid var(--c-border);
  border-radius: 8px; background: var(--c-bg);
  color: var(--c-text);
}

.form-error {
  color: #b30019; font-size: .92rem; margin: 0 0 var(--s-3);
  min-height: 1.5em;
}
@media (prefers-color-scheme: dark) {
  .form-error { color: #ff7d8e; }
}
.form-success {
  color: var(--c-accent); font-weight: 600;
  margin: 0 0 var(--s-3);
}
@media (prefers-color-scheme: dark) {
  .form-success { color: var(--c-accent-light); }
}

/* -------------------- Apps & Games specific -------------------- */
.app-card .card-art {
  background: linear-gradient(135deg, #ff5e62, #ff9966);
}
.app-card.app--rings .card-art {
  background: linear-gradient(135deg, #00bcd4 0%, #4caf50 50%, #f44336 100%);
}
.app-card.app--jay .card-art {
  background: linear-gradient(135deg, #5b6df0, #8a4ff0);
}
/* Game tiles use full-bleed art (SVG image or inline SVG). */
.game-card .card-art {
  background: #0a2f6e;          /* fallback color if the asset fails to load */
  padding: 0;
}
.game-card .card-art::before { display: none; }   /* no gradient overlay on the artwork */
.game-card .card-art-img,
.game-card .card-art-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

.game-card.game--drones .card-art {
  background: linear-gradient(135deg, #2c3e50, #4a6280);
}
.game-card.game--drones .card-art::before { display: block; } /* keep the soft overlay on the placeholder */
.game-card.game--drones .card-art::after {
  content: "🛸";
  position: relative;
  font-size: 3rem;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.3));
}

/* -------------------- Footer -------------------- */
.site-footer {
  margin-top: var(--s-6);                /* compact on mobile */
  padding: var(--s-5) 0;
  border-top: 1px solid var(--c-border-soft);
  background: var(--c-bg);               /* breaks the canvas gradient just above the footer */
  position: relative;
  color: var(--c-text-soft);
  font-size: .9rem;
}
.site-footer .row {
  display: flex; gap: var(--s-2);
  flex-wrap: wrap; align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .site-footer { margin-top: var(--s-8); padding: var(--s-7) 0 var(--s-6); }
  .site-footer .row { gap: var(--s-5); }
}
.site-footer a { color: var(--c-text-soft); }
.site-footer a:hover { color: var(--c-text); }

/* -------------------- Utilities -------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}