/* Theme pass: "blue robot" (TJ pick, variant a from drafts/nobody-brand-2026-10/original-blue/a/).
   The original v2 ink robot + Gabarito wordmark + bubble-corner shapes, recoloured to the FoundersMode/AgentsMode
   cobalt palette. Loaded AFTER tokens.css + site.css, so it applies on top of the shared stylesheet without editing it.
   Lexify copy: same theme as nobodyusa.com plus the Lexify section at the end (cobalt Lexify mark, seal, clip, white robots on cobalt). */

@font-face {
  font-family: "Gabarito";
  src: url("fonts/gabarito-variable.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: "Gabarito", -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Helvetica Neue", Arial, sans-serif;
  /* The bubble corner: every rounded object has one square bottom-left corner, like the robot's head. */
  --r-bubble-lg: 22px 22px 22px 0;
  --r-bubble: 14px 14px 14px 0;
  --r-bubble-sm: 6px 6px 6px 0;
  /* Robot colours: cobalt body, light-blue lamp. */
  --bot: #2B5CE6;
  --bot-lamp: #5B8DEF;
  --tracking-display: -0.04em;
}
@media (prefers-color-scheme: dark) {
  :root { --bot: #5B8DEF; --bot-lamp: #A8C6FF; }
}

/* ---------- The robot mark (inline SVG, see index.html / 404.html) ---------- */
.nb-head, .nb-ant { fill: var(--bot); }
.nb-lamp { fill: var(--bot-lamp); transform-box: fill-box; transform-origin: center; }
.night .nb-head, .night .nb-ant { fill: #5B8DEF; }        /* the night band is dark in both modes */
.night .nb-lamp { fill: #A8C6FF; }
.nb-bot__g { transform-box: fill-box; transform-origin: 50% 60%; transition: transform var(--dur-3) var(--ease-out); }
.brand:hover .nb-bot__g, .brand:focus-visible .nb-bot__g { transform: rotate(-4deg); }
.brand:hover .nb-lamp, .brand:focus-visible .nb-lamp { animation: nb-lamp 0.9s ease-in-out infinite; }
@keyframes nb-lamp { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@media (prefers-reduced-motion: reduce) {
  .brand:hover .nb-bot__g, .brand:focus-visible .nb-bot__g { transform: none; }
  .brand:hover .nb-lamp, .brand:focus-visible .nb-lamp { animation: none; }
}

/* ---------- Type: Gabarito for the wordmark and headings (v2 weights) ---------- */
.brand__word { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.footer .brand__word { color: #fff; }
h1, h2 { font-weight: 900; }
h3 { font-weight: 800; }
.row-product h3 { font-weight: 900; }
.slip__field dd, .record dd { font-weight: 800; }
.nav a:not(.btn), .nav-links a, .nav-menu__panel a { font-weight: 700; font-size: 15px; }
.nav-links a { color: var(--ink); }
.nav-links a:hover { color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--accent); text-underline-offset: 6px; }
.footer nav a { font-weight: 700; }

/* ---------- Buttons: bubble corner, cobalt primary, cobalt-outlined secondary ---------- */
.btn {
  border-radius: var(--r-bubble); box-shadow: none;
  font-weight: 700; font-size: 16px; padding: 13px 22px;
}
.btn--sm { padding: 9px 16px; font-size: 15px; }
.btn:hover { background: var(--accent-ink); color: #fff; }
/* Secondary: outlined in cobalt */
.btn--ghost { background: transparent; color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-ink); }
/* The closing CTA on the night band is the primary action too: cobalt, white text (5.56:1). */
.btn--lamp { background: #2B5CE6; color: #fff; box-shadow: none; }
.btn--lamp:hover { background: #1E48BF; color: #fff; }
.btn--approve { border-radius: var(--r-bubble); }
/* Menu toggle = the outlined bubble-corner button from v2, in cobalt */
.nav-menu__toggle {
  border-radius: var(--r-bubble); box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--accent-ink); font-weight: 700; font-size: 15px; background: transparent;
}
.nav-menu__panel { border-radius: var(--r-bubble); box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-card); }
.nav-menu__panel a { border-radius: var(--r-bubble-sm); }
.skip { border-radius: var(--r-bubble); }

/* ---------- Shapes: bubble corners on the paper objects ---------- */
.desk { border-radius: var(--r-bubble-lg); }
.slip, .ghost { border-radius: var(--r-bubble-lg); }
.tag { border-radius: var(--r-bubble-sm); font-weight: 700; }
.box { border-radius: var(--r-bubble-sm); }
.step__n { border-radius: 12px 12px 12px 0; font-weight: 900; }

/* ---------- Accents ---------- */
.lampdot { background: #A8C6FF; box-shadow: 0 0 20px 5px rgba(91, 141, 239, 0.55); }
.link { text-decoration-thickness: 2px; }

/* Dark: white heading text on the dark accent #5B8DEF is only 3.2:1, so the slip header keeps FM cobalt (5.56:1), like the filled buttons. */
@media (prefers-color-scheme: dark) { .slip__head { background: #2B5CE6; } }

/* Secondary actions next to a primary button render as the cobalt-outlined bubble button (CSS only, markup unchanged). */
.cta-row > .link, .row__actions > .row__changes {
  display: inline-flex; align-items: center; padding: 11.5px 20.5px; line-height: 1;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; white-space: nowrap;
  color: var(--accent-ink); background: transparent; text-decoration: none;
  border-radius: var(--r-bubble); box-shadow: inset 0 0 0 1.5px var(--accent);
  transition: background-color var(--dur-2) var(--ease-out);
}
.row__actions > .row__changes { padding: 7.5px 14.5px; font-size: 15px; }
.cta-row > .link:hover, .row__actions > .row__changes:hover { background: var(--accent-soft); color: var(--accent-ink); }
.cta-row { gap: var(--s-3); }
.row__actions { gap: var(--s-3); }
/* The "Needs you" tag sits on the tinted pending row, so give it paper behind it. */
.row--pending .tag { background: var(--paper); }

/* Header: Menu toggle and header CTA share one height so the two bubble buttons line up. */
.header .btn--sm, .nav-menu__toggle { min-height: 38px; padding-block: 0; }

/* ================= Lexify USA Inc. ================= */
/* Lexify mark: cobalt tile (both modes; white ring + L need the dark tile), light-blue dot = the robot's lamp colour. */
.logo-mark--lexify .logo-tile { fill: #2B5CE6; }
.logo-dot { fill: #A8C6FF; }
.brand--lexify .brand__word .brand__sub { color: var(--ink-soft); font-weight: 700; }
.footer .brand--lexify .brand__word .brand__sub { color: rgba(232, 234, 238, 0.62); }
/* White v2 robot on cobalt surfaces (buttons, the clip): eyes are holes, lamp is light blue. */
.mark-inline .nb-head, .mark-inline .nb-ant { fill: #fff; }
.mark-inline .nb-lamp { fill: #A8C6FF; }
.btn .mark-inline { width: 20px; height: 20px; }
/* "Looking for the product?" clip: flat cobalt instead of the cobalt -> #0A5FD8 gradient. White text 5.56:1. */
.clip { background-image: none; background-color: #2B5CE6; border-radius: var(--r-bubble-lg); }
.clip:hover { filter: none; background-color: #1E48BF; }
.letter { border-radius: var(--r-bubble-lg); }
/* The seal art is now cobalt. Dark mode used invert(1), which would turn cobalt orange-gold, so brighten it instead. */
@media (prefers-color-scheme: dark) {
  .seal { filter: brightness(1.55); mix-blend-mode: normal; opacity: 0.9; }
}
@media (max-width: 30rem) { .brand--lexify .brand__word { font-size: 17px; } }
.clip .mark-inline { display: block; width: 28px; height: 28px; margin-bottom: var(--s-2); }

/* ---------- Support / contact (Nash, 2026-10-08) ----------
   Home-page contact cards + footer contact line. No forms (CSP form-action 'none'): mailto/tel links only.
   Links keep --accent-ink on hover (only the underline thickens) so contrast never drops. */
.contact-list {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: grid; gap: var(--s-3); max-width: 40rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.contact-card {
  display: grid; gap: 2px; min-width: 0; padding: 14px 18px;
  background: var(--desk); border-radius: var(--r-bubble, 14px 14px 14px 0); box-shadow: inset 0 0 0 1px var(--rule);
}
.contact-card__label {
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.contact-card__link {
  display: inline-flex; align-items: center; min-height: 44px; justify-self: start; max-width: 100%;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1875rem; letter-spacing: -0.01em;
  color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  overflow-wrap: anywhere;
}
.contact-card__link:hover { color: var(--accent-ink); text-decoration-thickness: 3px; }
.contact-card__link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: 4px; }
.contact-after { margin-top: var(--s-5); }

.footer__contact {
  font-style: normal; margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-4); row-gap: 0;
  color: rgba(232, 234, 238, 0.72); font-family: var(--font-display); font-size: 14px; font-weight: 600;
}
.footer__contact a {
  display: inline-flex; align-items: center; min-height: 40px; max-width: 100%;
  color: #fff; font-weight: 700; font-size: 15px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px; overflow-wrap: anywhere;
}
.footer__contact a:hover { color: #fff; text-decoration-color: #fff; }
.footer__contact a:focus-visible { outline: 2px solid #A8C6FF; outline-offset: 2px; border-radius: 4px; }
@media (min-width: 48rem) { .footer .footer__contact { grid-column: 1 / -1; } }