/* ============================================================
   CALIBER · ISSUE #1 · golden-age comic world
   ink #14121A · paper #F7EFDC · red #E43B2C · blue #2456C4 · yellow #FFC728
   ============================================================ */

:root {
  --ink: #14121A;
  --paper: #F7EFDC;
  --paper-deep: #EFE2C4;
  --white: #FFFDF7;
  /* --red is the display red: big Bangers type, fills, strokes, shadows.
     It fails AA at text scale (4.16 on white, 3.70 on paper), so anything
     read as text -- labels, chips, buttons, body emphasis -- uses --red-deep. */
  --red: #E43B2C;
  --red-deep: #C22A1D;
  --green: #4E7A2F;      /* display green, matches the product UI */
  --green-deep: #2F6023; /* anything read as text */
  --blue: #2456C4;
  --blue-deep: #1A3F92;
  --yellow: #FFC728;
  --yellow-deep: #E0A400;
  --dots-ink: rgba(20, 18, 26, 0.16);
  --font-display: "Bangers", "Arial Narrow", sans-serif;
  --font-body: "Archivo", "Helvetica Neue", sans-serif;
  --font-hand: "Patrick Hand", "Comic Sans MS", cursive;
  --border: 3px solid var(--ink);
  --shadow-ink: 7px 8px 0 var(--ink);
  --shadow-ink-sm: 4px 5px 0 var(--ink);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background-color: var(--paper);
  background-image: radial-gradient(var(--dots-ink) 1px, transparent 1.4px);
  background-size: 22px 22px;
  caret-color: var(--red);
  overflow-x: hidden;
}

::selection { background: var(--yellow); color: var(--ink); }

::-webkit-scrollbar { width: 14px; }
::-webkit-scrollbar-track { background: var(--paper-deep); border-left: 2px solid var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 3px solid var(--paper-deep); border-radius: 8px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--white);
  background: var(--red);
  border: var(--border);
  box-shadow: var(--shadow-ink-sm);
  padding: 0.55em 1.2em 0.45em;
  cursor: pointer;
  transform: rotate(-0.5deg);
  transition: transform 140ms cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 140ms ease;
}
.btn:hover { transform: rotate(-0.5deg) translate(-2px, -3px); box-shadow: 7px 9px 0 var(--ink); }
.btn:active { transform: rotate(-0.5deg) translate(2px, 3px); box-shadow: 1px 2px 0 var(--ink); }

/* white on --red is 4.16:1, under AA. --red-deep clears it at 5.67:1. */
.btn-red { background: var(--red-deep); }
.btn-ink { background: var(--ink); color: var(--yellow); box-shadow: 4px 5px 0 rgba(20,18,26,0.32); }
.btn-ghost { background: var(--white); color: var(--ink); }
.btn-small { font-size: 1.1rem; padding: 0.45em 0.9em 0.35em; }
.btn-wide { width: 100%; text-align: center; font-size: 1.6rem; }

/* ---------- caption boxes (comic narration) ---------- */

.caption-box {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  line-height: 1.4;
  background: var(--yellow);
  border: var(--border);
  box-shadow: var(--shadow-ink-sm);
  padding: 0.7em 1em;
  transform: rotate(-0.6deg);
}

/* ---------- topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  background: var(--paper);
  border-bottom: var(--border);
}

.wordmark {
  font-family: var(--font-display);
  font-size: 2rem;
  text-decoration: none;
  color: var(--red);
  text-shadow: 2px 2px 0 var(--blue), 4px 4px 0 var(--ink);
  letter-spacing: 0.05em;
}
.wordmark-dot { color: var(--yellow-deep); }

/* ---------- cover / hero ---------- */

.cover {
  position: relative;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1rem, 5vw, 3rem) clamp(3.5rem, 9vh, 6.5rem);
  border-bottom: var(--border);
  overflow: hidden;
}

.cover-field {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 36%, var(--yellow) 0 26rem, transparent 26.05rem),
    radial-gradient(rgba(228, 59, 44, 0.35) 2px, transparent 2.6px),
    linear-gradient(160deg, var(--paper) 55%, var(--paper-deep));
  background-size: auto, 26px 26px, auto;
}

.cover-inner { position: relative; z-index: 2; max-width: 68rem; margin: 0 auto; }

.issue-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.issue-box {
  display: flex;
  gap: 0.8em;
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: 0.08em;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-ink-sm);
  padding: 0.5em 0.8em;
  transform: rotate(-1.2deg);
}
.issue-no { color: var(--red-deep); }

.authority-stamp {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  line-height: 1.3;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-ink-sm);
  padding: 0.5em 0.7em;
  transform: rotate(2deg);
}
.stamp-ok { color: var(--blue); font-size: 0.85rem; border-top: 2px solid var(--ink); margin-top: 0.2em; padding-top: 0.15em; }

.cover-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.cover-title .line { display: block; text-wrap: balance; }
.line-1 {
  color: var(--ink);
  text-shadow: 3px 3px 0 var(--paper), 5px 5px 0 rgba(228, 59, 44, 0.55);
}
.line-2 { color: var(--blue); text-shadow: 3px 3px 0 var(--paper), 6px 6px 0 var(--ink); }
.line-3 {
  color: var(--red);
  text-shadow: 3px 3px 0 var(--paper), 6px 6px 0 var(--ink);
  font-size: 1.08em;
}

.cover-caption { max-width: 34rem; margin-bottom: 2rem; }

.cover-actions { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* starburst sticker */

.burst {
  position: absolute;
  display: grid;
  place-items: center;
  width: 11.5rem;
  height: 11.5rem;
}
.burst-hero {
  right: clamp(0.5rem, 6vw, 6rem);
  bottom: clamp(1rem, 6vh, 3.5rem);
  transform: rotate(8deg);
  animation: burst-pulse 2.6s ease-in-out infinite;
}
.burst-star {
  position: absolute;
  inset: 0;
  background: var(--red);
  border: none;
  clip-path: polygon(100% 50%, 79.6% 62.3%, 85.4% 85.4%, 62.3% 79.6%, 50% 100%, 37.7% 79.6%, 14.6% 85.4%, 20.4% 62.3%, 0% 50%, 20.4% 37.7%, 14.6% 14.6%, 37.7% 20.4%, 50% 0%, 62.3% 20.4%, 85.4% 14.6%, 79.6% 37.7%);
  filter: drop-shadow(4px 5px 0 var(--ink));
}
.burst-star::after {
  content: "";
  position: absolute;
  inset: 7%;
  background: var(--yellow);
  clip-path: inherit;
}
.burst-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--ink);
}

@keyframes burst-pulse {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50% { transform: rotate(6deg) scale(1.045); }
}

/* ---------- open source strip ---------- */

.repo-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 1.6rem clamp(1rem, 4vw, 2.5rem);
  background: var(--paper-deep);
  border-bottom: var(--border);
}
.repo-caption { font-size: 1.25rem; margin: 0; }
.repo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  transform: rotate(0.5deg);
}
.gh-mark { width: 1.5rem; height: 1.5rem; color: var(--paper); flex-shrink: 0; }
.repo-name { color: var(--paper); }
.star-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--yellow);
  color: var(--ink);
  border: 2px solid var(--paper);
  padding: 0.1em 0.55em 0.05em;
  font-size: 1.05rem;
}
.star-ico { width: 1rem; height: 1rem; color: var(--ink); }

/* ---------- logo strip ---------- */

.logostrip {
  padding: clamp(2rem, 5vh, 3.5rem) clamp(1rem, 5vw, 3rem);
  border-bottom: var(--border);
  background: var(--white);
}
.logostrip-caption {
  width: fit-content;
  margin: 0 auto 2rem;
  font-size: 1.15rem;
}
.logos {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  max-width: 70rem;
  margin: 0 auto;
}
.logo-cell {
  transform: rotate(var(--tilt, 0deg));
  filter: grayscale(1) brightness(0.25) contrast(1.6);
  opacity: 0.9;
  transition: filter 160ms ease, opacity 160ms ease;
}
.logo-cell:hover { filter: none; opacity: 1; }
.logo-cell img { height: 2.2rem; width: auto; }
.logo-cell img[alt="Toka Group"] { height: 2.7rem; }
.logo-idf { display: flex; align-items: center; gap: 0.6rem; }
.logo-idf img { height: 3.2rem; }
.logo-idf-label {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

/* ---------- shared section chrome ---------- */

.panels-section {
  padding: clamp(3rem, 9vh, 6rem) clamp(1rem, 5vw, 3rem);
  max-width: 76rem;
  margin: 0 auto;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.section-title span {
  background: var(--ink);
  color: var(--paper);
  padding: 0.08em 0.35em 0.02em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  text-shadow: -2px 1px 0 rgba(228, 59, 44, 0.65), 2px -1px 0 rgba(36, 86, 196, 0.65);
}
.section-sub {
  font-family: var(--font-hand);
  font-size: 1.35rem;
  margin-bottom: clamp(2rem, 5vh, 3.2rem);
}
.hover-hint { color: var(--red-deep); }

/* ---------- panels ---------- */

.panel {
  position: relative;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-ink);
  padding: 1.6rem 1.5rem;
  transform: rotate(var(--tilt, 0deg));
}

/* entrances (JS adds .inked when scrolled into view); each section has its own move */
.will-ink { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(1.06); }
.will-slide { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(28px); }
.will-pop { opacity: 0; transform: rotate(var(--tilt, 0deg)) scale(0.93); }
.inked {
  opacity: 1;
  transform: rotate(var(--tilt, 0deg)) scale(1) translateY(0);
  transition: opacity 300ms ease-out, transform 380ms cubic-bezier(0.2, 1.6, 0.35, 1);
}
.will-slide.inked { transition: opacity 260ms ease-out, transform 420ms cubic-bezier(0.16, 1, 0.3, 1); }

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.6rem);
}
@media (min-width: 1000px) {
  .panel-grid { grid-template-columns: 1fr 1fr; }
}

/* speech bubbles */

.bubble {
  position: relative;
  background: var(--paper);
  border: var(--border);
  border-radius: 18px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.6rem;
}
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  left: 2.2rem;
  bottom: -20px;
  width: 30px;
  height: 23px;
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 26% 100%);
}
.bubble::after {
  left: calc(2.2rem + 4px);
  bottom: -14px;
  width: 21px;
  height: 16px;
  background: var(--paper);
}
.bubble-text {
  font-family: var(--font-hand);
  font-size: 1.45rem;
  line-height: 1.32;
}
.bubble-text::before { content: "\201C"; }
.bubble-text::after { content: "\201D"; }

.quote-by { display: flex; align-items: center; gap: 0.9rem; }
.quote-by strong { display: block; font-size: 1.05rem; font-weight: 900; }
.quote-by span:not(.medallion) { font-size: 0.9rem; }
.quote-by div span { display: block; }

.medallion {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: var(--border);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--white);
  flex-shrink: 0;
}
.medallion-red { background: var(--red); }
.medallion-blue { background: var(--blue); }

/* stats + classified panels */

.panel-stats { background: var(--blue); color: var(--white); }
.panel-kapow {
  position: absolute;
  top: -1.4rem;
  right: 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--ink), 4px 4px 0 var(--red);
  transform: rotate(3deg);
}
.stats-lede { font-family: var(--font-hand); font-size: 1.3rem; margin-bottom: 0.9rem; }
.stats-list { list-style: none; display: grid; gap: 0.55rem; margin-bottom: 1.1rem; }
.stats-list li { padding-left: 1.4rem; position: relative; }
.stats-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 0.95em;
  height: 0.95em;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.stats-list strong { font-weight: 900; color: var(--yellow); }
.stats-foot { font-size: 0.85rem; opacity: 0.85; }

.panel-classified { background: var(--paper); }
.classified-stamp {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  color: var(--red-deep);
  border: 3px double var(--red-deep);
  padding: 0.15em 0.5em 0.05em;
  transform: rotate(7deg);
  opacity: 0.9;
}
.classified-line { display: flex; gap: 0.5rem; margin: 0.8rem 0; }
.redact { display: inline-block; height: 1.05em; background: var(--ink); }
.w-32 { width: 32%; } .w-40 { width: 40%; } .w-56 { width: 56%; } .w-64 { width: 64%; }
.classified-copy { font-size: 1.05rem; max-width: 90%; }
.panel-classified .stats-foot { color: var(--ink); opacity: 0.7; margin-top: 0.6rem; }

/* ---------- powers ---------- */

.power-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.6rem);
}
.power { padding-top: 2rem; }
.power-icon {
  width: 4.2rem;
  height: 4.2rem;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--pow, var(--red));
  border: var(--border);
  box-shadow: var(--shadow-ink-sm);
  border-radius: 50%;
  margin-bottom: 1.1rem;
  transform: rotate(-2deg);
}
.power-icon svg { width: 2.4rem; height: 2.4rem; }
.power-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pow, var(--red));
  text-shadow: 2px 2px 0 var(--ink);
  -webkit-text-stroke: 1px var(--ink);
  margin-bottom: 0.2rem;
}
.power-tag { font-family: var(--font-hand); font-size: 1.25rem; margin-bottom: 0.6rem; }
.power-copy { font-size: 1rem; }

/* ---------- team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: clamp(1.5rem, 3vw, 2.4rem);
}

.hero-card { text-align: left; }

.loc-tag {
  position: absolute;
  top: -0.9rem;
  left: 1rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  background: var(--yellow);
  border: var(--border);
  padding: 0.2em 0.6em 0.1em;
  transform: rotate(-2deg);
  z-index: 2;
}

.face {
  position: relative;
  border: var(--border);
  margin-bottom: 1rem;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--paper-deep);
}
.face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.01);
  transition: filter 180ms ease, transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* halftone + tint overlay, revealed on hover */
.face-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background-image: radial-gradient(var(--ink) 1.1px, transparent 1.6px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
  transition: opacity 180ms ease;
}
.face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--tint, var(--red));
  mix-blend-mode: color;
  opacity: 0;
  transition: opacity 180ms ease;
}

.hero-card:hover .face img,
.hero-card:focus-visible .face img {
  filter: url(#comicify) contrast(1.15) saturate(1.4);
  transform: scale(1.06) rotate(-1deg);
}
.hero-card:hover .face-dots,
.hero-card:focus-visible .face-dots,
.hero-card:hover .face::before,
.hero-card:focus-visible .face::before { opacity: 0.55; }

.burst-face {
  width: 6.4rem;
  height: 6.4rem;
  right: -0.8rem;
  top: -0.8rem;
  z-index: 2;
  transform: rotate(10deg) scale(0);
  transition: transform 220ms cubic-bezier(0.2, 1.7, 0.4, 1);
}
.burst-face .burst-text { font-size: 1.3rem; }
.hero-card:hover .burst-face,
.hero-card:focus-visible .burst-face { transform: rotate(10deg) scale(1); }

.face-squad {
  display: grid;
  place-items: center;
  color: var(--ink);
  background:
    radial-gradient(rgba(36, 86, 196, 0.25) 2px, transparent 2.6px),
    var(--paper);
  background-size: 14px 14px, auto;
}
.squad-bot { width: 62%; transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.squad-card:hover .squad-bot,
.squad-card:focus-visible .squad-bot { transform: rotate(-4deg) scale(1.08); color: var(--blue); }

.hero-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.03em;
}
.hero-role {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--red-deep);
  margin-bottom: 0.5rem;
}
.hero-bio { font-size: 0.97rem; }

/* ---------- signal / contact ---------- */

.signal {
  position: relative;
  border-top: var(--border);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(11rem, 20vh, 14rem) clamp(1rem, 5vw, 3rem) clamp(3rem, 9vh, 6rem);
  overflow: hidden;
}
/* the Caliber-signal: searchlight beam from the bottom-left projecting the
   three-bar logo into the night sky at the top right */
.signal-beam {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 220, 110, 0.50), rgba(255, 210, 80, 0.22) 55%, rgba(255, 199, 40, 0.10) 85%);
  clip-path: polygon(3% 100%, 11% 100%, 57% 0%, 45% 0%);
  animation: beam-flicker 5s ease-in-out infinite;
}
.signal-emblem {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  margin-left: -8.5rem;
  width: 17rem;
  height: 9rem;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: rotate(-8deg) skewX(-5deg);
  background: radial-gradient(ellipse at center, rgba(255, 224, 130, 0.75), rgba(255, 210, 80, 0.35) 52%, transparent 72%);
  border-radius: 50%;
  animation: beam-flicker 5s ease-in-out infinite;
}
/* the projected logo: a dark silhouette inside the light, bat-signal style */
.emblem-mark {
  font-family: var(--font-display);
  font-size: 2.7rem;
  letter-spacing: 0.05em;
  color: rgba(12, 10, 16, 0.92);
  filter: blur(0.4px);
}

@keyframes beam-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}
.signal-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 72rem;
  margin: 0 auto;
  align-items: start;
}
.signal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--yellow);
  text-shadow: 3px 3px 0 var(--red), 6px 6px 0 rgba(0, 0, 0, 0.55);
  margin-bottom: 1.4rem;
}
.signal-checks { list-style: none; display: grid; gap: 0.7rem; margin-bottom: 1.8rem; }
.signal-checks li {
  position: relative;
  padding-left: 2.2rem;
  font-size: 1.15rem;
  font-weight: 500;
}
.signal-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--yellow);
  border: 2px solid var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314121A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5 5L20 6'/%3E%3C/svg%3E");
  background-size: 70%;
  background-position: center;
  background-repeat: no-repeat;
}
.signal-note { color: var(--ink); max-width: 26rem; font-size: 1.05rem; }

.signal-form { display: grid; gap: 1.1rem; padding: 1.8rem 1.6rem; color: var(--ink); }

.field { display: grid; gap: 0.35rem; border: none; }
.field-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}
.field input,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: var(--border);
  padding: 0.65em 0.8em;
  width: 100%;
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(20, 18, 26, 0.72); }
.field input:focus,
.field textarea:focus { outline: 3px solid var(--blue); outline-offset: 2px; background: var(--white); }

.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.3rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: inline-block;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  border: var(--border);
  background: var(--paper);
  padding: 0.25em 0.8em;
  transition: transform 120ms ease, background 120ms ease;
}
.chip:hover span { transform: translate(-1px, -2px); }
.chip input:checked + span {
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-1.5deg);
}
.chip input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- footer ---------- */

.footer {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  border-top: 3px solid var(--paper);
  text-align: center;
  /* the top band is reserved for the projected emblem so it never lands on text */
  padding: 5.4rem 1rem 2rem;
  font-size: 0.95rem;
  overflow: hidden;
}
.footer a { color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.footer p + p { margin-top: 0.3rem; }
/* pages that already carry the full bat-signal section skip the mini one,
   so they do not need the reserved emblem band either */
.footer.is-plain { padding-top: 1.6rem; }

/* ---------- footer signal (mini bat-signal reminder, black sky) ---------- */
.footer-signal {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.footer-signal-beam {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(255, 210, 80, 0.28), rgba(255, 199, 40, 0.08) 60%, transparent 90%);
  clip-path: polygon(38% 100%, 48% 100%, 58% 8%, 48% 8%);
  animation: beam-flicker 5s ease-in-out infinite;
}
.footer-signal-emblem {
  position: absolute;
  top: 0.7rem;
  left: 50%;
  margin-left: -5.2rem;
  width: 10.4rem;
  height: 3.8rem;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at center, rgba(255, 224, 130, 0.55), rgba(255, 210, 80, 0.2) 55%, transparent 75%);
  border-radius: 50%;
  transform: rotate(-6deg) skewX(-4deg);
  animation: beam-flicker 5s ease-in-out infinite;
}
.footer-signal-emblem span {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  color: rgba(12, 10, 16, 0.88);
}
.footer-signal-link {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--yellow) !important;
  margin-bottom: 0.6rem;
  text-decoration: none !important;
}
.footer-signal-link:hover { text-decoration: underline wavy var(--yellow) !important; text-underline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .footer-signal-beam, .footer-signal-emblem { animation: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .burst-hero {
    position: static;
    width: 10rem;
    height: 10rem;
    margin: 2.2rem 0 0 auto;
    transform: rotate(6deg);
  }
  .burst-hero .burst-text { font-size: 1rem; }
  .cover { display: flex; flex-direction: column; }
}

@media (max-width: 900px) {
  .signal-inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .cover-title { font-size: clamp(2.3rem, 11.5vw, 3.2rem); }
  .issue-row { margin-bottom: 1.2rem; }
  .authority-stamp { display: none; }
  .burst-hero { margin: 2rem auto 0; }
  .cover { padding-bottom: 2.5rem; }
  .panel { box-shadow: var(--shadow-ink-sm); }
  .logos { gap: 1.4rem 2.2rem; }
  .logo-cell img { height: 1.8rem; }
  .logo-idf img { height: 2.6rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .burst-hero { animation: none; }
  .will-ink, .will-slide, .will-pop { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
  .inked { transition: none; }
  .btn, .face img, .burst-face, .squad-bot, .chip span { transition: none; }
  .signal-beam, .signal-emblem { animation: none; }
}

/* ============================================================
   MASCOT (Captain C) + hover pass, 2026-08-05
   ============================================================ */

.mascot { pointer-events: none; }
.mascot img { width: 100%; height: auto; }
.flip-x { transform: scaleX(-1); }
#owl-canvas { display: block; width: 100%; height: auto; }
#owl-canvas[hidden], #owl-img[hidden] { display: none; }
.mascot-hero.dots-live { animation: none; }

.mascot-hero {
  position: absolute;
  right: clamp(1.5rem, 6vw, 5.5rem);
  top: 26%;
  width: clamp(130px, 14.5vw, 205px);
  z-index: 3;
  filter: drop-shadow(5px 6px 0 rgba(20, 18, 26, 0.25));
  animation: mascot-bob 3.4s ease-in-out infinite;
}
@keyframes mascot-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-12px) rotate(-1deg); }
}

.mascot-peek {
  position: absolute;
  top: -3.1rem;
  right: 1.6rem;
  width: 9rem;
  z-index: 2;
  transition: transform 200ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.panel-quote:hover .mascot-peek { transform: translateY(-5px); }

#proof, .powers, .team-section { position: relative; }
.mascot-point {
  position: absolute;
  top: clamp(2rem, 6vh, 3.5rem);
  right: clamp(0.5rem, 6vw, 5rem);
  width: clamp(110px, 11vw, 160px);
  filter: drop-shadow(4px 5px 0 rgba(20, 18, 26, 0.22));
}
.mascot-salute {
  position: absolute;
  top: clamp(2.5rem, 7vh, 4.2rem);
  right: clamp(0.5rem, 6vw, 5rem);
  width: clamp(100px, 10vw, 145px);
  filter: drop-shadow(4px 5px 0 rgba(20, 18, 26, 0.22));
}
.mascot-signal {
  position: absolute;
  bottom: 3%;
  left: 6%;
  width: 6.5rem;
}
.mascot-signal img { filter: brightness(0) opacity(0.9); }

@media (max-width: 1100px) {
  .mascot-hero { width: 120px; right: 1rem; top: 12%; }
}
@media (max-width: 980px) {
  .mascot-point, .mascot-salute { width: 84px; top: 0.4rem; opacity: 0.9; }
}
@media (max-width: 700px) {
  .mascot-point, .mascot-salute, .mascot-signal { display: none; }
  .mascot-peek { width: 5.5rem; top: -1.9rem; }
  /* mobile hero owl: bottom-right of the cover, beside the centered burst */
  .mascot-hero {
    top: auto;
    bottom: 0.9rem;
    right: 0.75rem;
    width: min(23vw, 96px);
  }
  .burst-hero { margin: 2rem auto 0; }
}

/* ---------- hover pass: every element gets its own comic move ---------- */

.panel { transition: transform 200ms cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 200ms ease; }
.panel:hover { transform: rotate(var(--tilt, 0deg)) translate(-3px, -4px); box-shadow: 10px 12px 0 var(--ink); }

.panel-quote:hover .bubble { animation: bubble-puff 480ms cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes bubble-puff {
  0% { transform: scale(1); }
  45% { transform: scale(1.025) rotate(-0.4deg); }
  100% { transform: scale(1); }
}
.medallion { transition: transform 200ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.panel-quote:hover .medallion { transform: rotate(-10deg) scale(1.1); }

.panel-stats:hover .stats-list strong { animation: stat-punch 500ms cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes stat-punch {
  0% { transform: scale(1); }
  40% { transform: scale(1.22); color: var(--white); }
  100% { transform: scale(1); }
}
.stats-list strong { display: inline-block; }

/* classified: top bar peels away to reveal the joke */
.redact-reveal { position: relative; display: inline-block; height: 1.05em; overflow: visible; }
.redact-secret {
  position: absolute;
  inset: 0;
  font-family: var(--font-hand);
  font-size: 0.95em;
  line-height: 1.1;
  color: var(--red-deep);
  white-space: nowrap;
}
.redact-bar {
  position: absolute;
  inset: 0;
  background: var(--ink);
  z-index: 1;
  transition: transform 380ms cubic-bezier(0.2, 1.2, 0.4, 1), opacity 380ms ease;
}
.panel-classified:hover .redact-bar { transform: translate(60%, -10%) rotate(3deg); opacity: 0.92; }

/* powers: icon pops, action word appears */
.power-icon { transition: transform 220ms cubic-bezier(0.2, 1.6, 0.4, 1); }
.power:hover .power-icon { transform: rotate(-10deg) scale(1.14); }
.power-pow {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--pow, var(--red));
  text-shadow: 2px 2px 0 var(--ink);
  transform: scale(0) rotate(8deg);
  transform-origin: center;
  transition: transform 240ms cubic-bezier(0.2, 1.7, 0.4, 1);
}
.power:hover .power-pow { transform: scale(1) rotate(-4deg); }

/* logos: tilt snaps straight, color returns, slight grow */
.logo-cell { transition: filter 180ms ease, opacity 180ms ease, transform 200ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.logo-cell:hover { transform: rotate(0deg) scale(1.09); }

/* wordmark: the ! jumps */
.wordmark-dot { display: inline-block; }
.wordmark:hover .wordmark-dot { animation: dot-jump 420ms cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes dot-jump {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-7px) rotate(10deg); }
}

/* repo button: star spins, pill pops */
.star-ico { transition: transform 400ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.repo-btn:hover .star-ico { transform: rotate(72deg) scale(1.25); }
.star-pill { transition: transform 200ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.repo-btn:hover .star-pill { transform: rotate(-3deg) scale(1.06); }

/* signal checklist: stamps re-stamp */
.signal-checks li::before { transition: transform 200ms cubic-bezier(0.2, 1.6, 0.4, 1); }
.signal-checks li:hover::before { transform: scale(1.18) rotate(-6deg); }

/* issue box + stamp wiggle */
.issue-box, .authority-stamp { transition: transform 220ms cubic-bezier(0.2, 1.4, 0.4, 1); }
.issue-box:hover { transform: rotate(0.6deg) scale(1.04); }
.authority-stamp:hover { transform: rotate(-1deg) scale(1.04); }

/* form fields: paper lifts to white with a nudge */
.field input, .field textarea { transition: background 150ms ease, transform 150ms ease; }
.field input:hover, .field textarea:hover { background: var(--white); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .mascot-hero { animation: none; }
  .panel, .panel:hover,
  .medallion, .power-icon, .power-pow, .logo-cell, .star-ico, .star-pill,
  .signal-checks li::before, .issue-box, .authority-stamp, .redact-bar,
  .mascot-peek { transition: none; animation: none; }
  .panel-quote:hover .bubble, .panel-stats:hover .stats-list strong,
  .wordmark:hover .wordmark-dot { animation: none; }
}

/* ============================================================
   OWL BUDDY: small mascot that roams the page doing little bits
   ============================================================ */

.owl-buddy {
  position: absolute;
  z-index: 40;
  width: clamp(64px, 6.5vw, 96px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.owl-buddy.buddy-in { opacity: 1; transform: translateY(0) scale(1); }
.owl-buddy img { width: 100%; height: auto; display: block; }
.owl-buddy.face-left img { transform: scaleX(-1); }

/* idle sway */
.owl-buddy.pose-idle img { animation: buddy-sway 3s ease-in-out infinite; }
@keyframes buddy-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.owl-buddy.face-left.pose-idle img { animation: buddy-sway-flip 3s ease-in-out infinite; }
@keyframes buddy-sway-flip {
  0%, 100% { transform: scaleX(-1) rotate(2deg); }
  50% { transform: scaleX(-1) rotate(-2deg); }
}

/* pecking: quick head-bob rocking around the feet */
.owl-buddy.pose-peck img { animation: buddy-peck 900ms ease-in-out infinite; transform-origin: 30% 92%; }
@keyframes buddy-peck {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(6deg) translateY(3px); }
  45% { transform: rotate(5deg) translateY(2px); }
  60% { transform: rotate(7deg) translateY(3px); }
}

/* kicking: a little punt with recoil */
.owl-buddy.pose-kick img { animation: buddy-kick 1400ms cubic-bezier(0.2, 1.4, 0.4, 1) infinite; transform-origin: 45% 90%; }
@keyframes buddy-kick {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(-7deg) translateX(-2px); }
  30% { transform: rotate(4deg) translateX(3px); }
  44% { transform: rotate(0deg) translateX(0); }
}

/* the kicked star zips away */
.buddy-star {
  position: absolute;
  right: -14px;
  bottom: 14%;
  width: 16px;
  height: 16px;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(1px 1px 0 var(--ink));
  opacity: 0;
}
.owl-buddy.pose-kick .buddy-star { animation: star-zip 1400ms ease-out infinite; }
@keyframes star-zip {
  0%, 24% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.7); }
  30% { opacity: 1; }
  70% { opacity: 1; transform: translate(56px, -34px) rotate(160deg) scale(1); }
  100% { opacity: 0; transform: translate(84px, -44px) rotate(240deg) scale(0.8); }
}

@media (max-width: 700px) { .owl-buddy { display: none; } }
@media (prefers-reduced-motion: reduce) { .owl-buddy { display: none; } }


/* ---------- fixed section cameos (always-on pose loops) ---------- */

.mascot-cameo { position: absolute; pointer-events: none; }

/* love owl: heart held up at the wing, stars raining down (open-source strip) */
.cameo-love {
  left: clamp(0.8rem, 5vw, 4.2rem);
  bottom: 0.35rem;
  width: clamp(74px, 7vw, 102px);
}
/* the strip centres its content, so without a reserved gutter the absolutely
   positioned owl lands on the caption at mid widths (caught at 1024px) */
@media (min-width: 701px) { .repo-strip { padding-left: clamp(7rem, 11vw, 10rem); } }
.cameo-love img { animation: love-sway 2.8s ease-in-out infinite; transform-origin: 50% 96%; }
@keyframes love-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg) translateY(-2px); }
}
.love-star {
  position: absolute;
  top: -14%;
  width: 13px;
  height: 13px;
  background: var(--yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(1px 1px 0 var(--ink));
  opacity: 0;
  animation: star-fall 2.7s linear infinite;
}
.ls1 { left: 4%; }
.ls2 { left: 30%; width: 9px; height: 9px; animation-delay: 1.1s; }
.ls3 { left: 55%; animation-delay: 0.5s; animation-duration: 3.1s; }
.ls4 { left: 78%; width: 10px; height: 10px; animation-delay: 1.7s; }
.ls5 { left: 95%; width: 8px; height: 8px; animation-delay: 2.2s; animation-duration: 2.3s; }
@keyframes star-fall {
  0% { opacity: 0; transform: translate(0, -10px) rotate(0deg) scale(0.7); }
  10% { opacity: 1; transform: translate(2px, 4px) rotate(40deg) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(-4px, 92px) rotate(230deg) scale(0.85); }
}

/* kick owl: beside the testimonials title (unchanged punt + star zip) */
.cameo-kick {
  top: clamp(1.2rem, 4vh, 2.4rem);
  right: clamp(0.8rem, 6vw, 5rem);
  width: clamp(96px, 9.5vw, 140px);
}
.cameo-kick img { animation: buddy-kick 1600ms cubic-bezier(0.2, 1.4, 0.4, 1) infinite; transform-origin: 45% 90%; }
.cameo-kick .buddy-star { animation: star-zip 1600ms ease-out infinite; opacity: 0; }

/* dig owl: head-down excavation with dirt clumps flying (powers section) */
.cameo-dig {
  top: clamp(1.6rem, 5vh, 3rem);
  right: clamp(0.8rem, 6vw, 5rem);
  width: clamp(96px, 9.5vw, 142px);
}
.cameo-dig img { position: relative; z-index: 1; animation: dig-chop 720ms ease-in-out infinite; transform-origin: 32% 90%; }
/* the hole he's digging: ink ellipse under the beak, behind the owl */
.dig-hole {
  position: absolute;
  right: -12%;
  bottom: -5%;
  width: 58%;
  height: 20%;
  background: radial-gradient(ellipse at 50% 30%, #453D52, var(--ink) 72%);
  border: 3px solid var(--ink);
  border-radius: 50%;
  transform: rotate(-3deg);
}
@keyframes dig-chop {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(8deg) translateY(4px); }
  48% { transform: rotate(5deg) translateY(3px); }
  62% { transform: rotate(9deg) translateY(5px); }
}
.dig-dirt {
  position: absolute;
  right: 16%;
  bottom: 8%;
  width: 11px;
  height: 9px;
  background: #B08948;
  border: 2px solid var(--ink);
  border-radius: 58% 42% 55% 45%;
  opacity: 0;
}
.dd1 { animation: dirt-fly 1440ms ease-out infinite; }
.dd2 { width: 8px; height: 7px; animation: dirt-fly-2 1440ms ease-out 240ms infinite; }
.dd3 { width: 7px; height: 6px; animation: dirt-fly-3 1440ms ease-out 480ms infinite; }
@keyframes dirt-fly {
  0%, 40% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  48% { opacity: 1; }
  78% { opacity: 1; transform: translate(-52px, -44px) rotate(-160deg); }
  100% { opacity: 0; transform: translate(-72px, -26px) rotate(-240deg); }
}
@keyframes dirt-fly-2 {
  0%, 40% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  48% { opacity: 1; }
  78% { opacity: 1; transform: translate(-38px, -56px) rotate(140deg); }
  100% { opacity: 0; transform: translate(-50px, -34px) rotate(220deg); }
}
@keyframes dirt-fly-3 {
  0%, 40% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  48% { opacity: 1; }
  78% { opacity: 1; transform: translate(-24px, -38px) rotate(-120deg); }
  100% { opacity: 0; transform: translate(-30px, -20px) rotate(-190deg); }
}

/* ---------- stories -> comics flip link (topbar + testimonials CTA) ---------- */

.topbar-right { display: flex; align-items: center; gap: 1.1rem; }

.stories-flip {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding: 0.35em 0.2em 0.25em;
}
.sf-base {
  display: inline-block;
  transition: opacity 200ms ease 120ms, transform 200ms ease 120ms;
}
.sf-strike {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 52%;
  height: 4px;
  background: var(--red);
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(20, 18, 26, 0.4);
  transform: scaleX(0) rotate(-2deg);
  transform-origin: left center;
  transition: transform 220ms cubic-bezier(0.6, 0, 0.4, 1);
  pointer-events: none;
}
.sf-over {
  position: absolute;
  left: 50%;
  top: 50%;
  white-space: nowrap;
  /* this is text, so it takes the AA-safe red, not the display red */
  color: var(--red-deep);
  text-shadow: 1px 1px 0 var(--paper), 2px 2px 0 var(--ink);
  transform: translate(-50%, -50%) rotate(-4deg) scale(0);
  transition: transform 240ms cubic-bezier(0.2, 1.7, 0.4, 1) 160ms;
  pointer-events: none;
}
.stories-flip:hover .sf-strike,
.stories-flip:focus-visible .sf-strike { transform: scaleX(1) rotate(-2deg); }
.stories-flip:hover .sf-base,
.stories-flip:focus-visible .sf-base { opacity: 0.3; transform: rotate(-1deg); }
.stories-flip:hover .sf-over,
.stories-flip:focus-visible .sf-over { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }

/* every few seconds, a small nudge so the gag gets discovered */
.stories-flip .sf-base { animation: sf-nudge 6s ease-in-out infinite; }
@keyframes sf-nudge {
  0%, 92%, 100% { transform: rotate(0deg); }
  94% { transform: rotate(-2deg) translateY(-1px); }
  97% { transform: rotate(1.5deg); }
}
.stories-flip:hover .sf-base { animation: none; }

/* ---------- solutions dropdown (Solutions -> Abilities!) ---------- */
.nav-solutions { position: relative; display: inline-block; }
/* the trigger reuses the strike-and-stamp gag; it is a button, not a link,
   because it opens a menu rather than going anywhere. Only the button chrome
   is reset: everything typographic comes from .stories-flip so it is visually
   identical to the Customer stories link. */
.solutions-flip {
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  line-height: inherit;
}
.nav-solutions:hover .sf-strike,
.solutions-flip:focus-visible .sf-strike,
.solutions-flip[aria-expanded="true"] .sf-strike { transform: scaleX(1) rotate(-2deg); }
.nav-solutions:hover .sf-base,
.solutions-flip:focus-visible .sf-base,
.solutions-flip[aria-expanded="true"] .sf-base { opacity: 0.3; transform: rotate(-1deg); }
.nav-solutions:hover .sf-over,
.solutions-flip:focus-visible .sf-over,
.solutions-flip[aria-expanded="true"] .sf-over { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
.nav-solutions:hover .sf-base { animation: none; }

.solutions-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 19rem;
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-ink-sm);
  padding: 0.4rem;
  display: grid;
  gap: 0.3rem;
  z-index: 40;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) rotate(-0.6deg);
  transition: opacity 160ms ease, transform 180ms cubic-bezier(0.2, 1.5, 0.4, 1), visibility 0s linear 180ms;
}
.nav-solutions:hover .solutions-menu,
.nav-solutions:focus-within .solutions-menu,
.solutions-flip[aria-expanded="true"] + .solutions-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(-0.6deg);
  transition-delay: 0s;
}
/* Between the phone layout and full desktop the trigger sits too far left for a
   19rem menu to hang off its right edge, so it ran off screen (caught at 768px
   on the solution pages, whose topbar is narrower). Flip it to left-aligned so
   it stays attached to its trigger instead of drifting to the bar's edge. */
@media (min-width: 701px) and (max-width: 900px) {
  .solutions-menu { left: 0; right: auto; }
}
/* a hover bridge so the pointer can travel from trigger to menu */
.solutions-menu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -0.6rem;
  height: 0.6rem;
}
.solutions-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  text-decoration: none;
  color: var(--ink);
  border: 2px solid transparent;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.solutions-item:hover,
.solutions-item:focus-visible { background: var(--yellow); border-color: var(--ink); transform: translateX(2px); }
.solutions-item img { width: 2.3rem; height: auto; flex: none; }
.si-text { display: grid; }
.si-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}
.si-desc { font-family: var(--font-body); font-size: 0.8rem; opacity: 0.8; }
/* Heroes Room ships as a pilot: no customer has been delivered one yet, so the
   menu says so rather than presenting it as a peer of the three with proof. */
.si-new {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white);
  background: var(--red-deep);
  border: 2px solid var(--ink);
  padding: 0.12em 0.4em 0.06em;
  margin-left: 0.35rem;
  vertical-align: 0.15em;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .solutions-menu { transition: opacity 1ms linear, visibility 1ms linear; transform: rotate(-0.6deg); }
  .nav-solutions:hover .solutions-menu,
  .nav-solutions:focus-within .solutions-menu,
  .solutions-flip[aria-expanded="true"] + .solutions-menu { transform: rotate(-0.6deg); }
  .solutions-item { transition: none; }
}

.proof-more { text-align: center; margin-top: clamp(2rem, 5vh, 3rem); }
.stories-flip-big {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  background: var(--white);
  border: var(--border);
  box-shadow: var(--shadow-ink-sm);
  padding: 0.5em 0.9em 0.4em;
  transform: rotate(-0.6deg);
  transition: transform 140ms cubic-bezier(0.2, 1.4, 0.4, 1), box-shadow 140ms ease;
}
.stories-flip-big:hover { transform: rotate(-0.6deg) translate(-2px, -3px); box-shadow: 7px 9px 0 var(--ink); }
.stories-flip-big .sf-strike { height: 6px; }

@media (max-width: 700px) {
  /* Customer stories is primary nav and must not vanish on a phone. The bar
     wraps to its own row below, so there is room for it; it just needs to stop
     shouting at desktop size. */
  .topbar-right .stories-flip { display: inline-block; font-size: 1rem; }
  /* let the bar wrap instead of pushing itself past the viewport: the nav
     takes its own full-width row, then its buttons wrap inside it */
  /* three nav items plus the CTA cannot share one row on a phone, so the bar
     wraps. Keep the rows tight: this header is sticky and every pixel of it is
     permanently taken off the reading area. */
  .topbar { flex-wrap: wrap; row-gap: 0.3rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .topbar-right {
    /* basis 0, not auto: with auto the nav's full content width exceeds the
       space left by the wordmark, and a wrapping flex container wraps the whole
       item to its own row before it will shrink it. Starting from 0 lets the
       nav sit beside the wordmark and wrap the CTA internally instead, which
       costs the sticky header one row rather than two. */
    flex: 1 1 0;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .topbar-right .btn-small { font-size: 0.85rem; padding: 0.38em 0.6em 0.28em; }
  .topbar-right .btn { white-space: normal; }
  /* anchor the dropdown to the bar, not the trigger, so it cannot run off
     the left edge on a narrow screen */
  .nav-solutions { position: static; }
  .solutions-menu {
    min-width: 0;
    left: 0.6rem;
    right: 0.6rem;
    top: calc(100% + 0.4rem);
  }
  .solutions-item img { width: 1.9rem; }
}
/* Very narrow phones (SE class): at 2rem the wordmark leaves too little room
   for both nav links, so they stack one per row and the bar balloons. Shrink
   the mark and the links just enough that they share a single row. */
@media (max-width: 360px) {
  .wordmark { font-size: 1.6rem; }
  .topbar-right .stories-flip { font-size: 0.92rem; }
  .topbar-right { gap: 0.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-base, .sf-strike, .sf-over, .stories-flip-big { transition: none; animation: none; }
}

/* grawlix stars in the testimonials headline */
.section-title .grawlix {
  color: var(--yellow);
  animation: grawlix-twinkle 2.2s ease-in-out infinite;
}
@keyframes grawlix-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* mobile cameos: smaller, repositioned so they never sit on text */
@media (max-width: 700px) {
  .cameo-love { position: relative; left: auto; order: 3; width: 64px; margin: 0.4rem auto 0; }
  .cameo-kick { width: 64px; top: -0.5rem; right: 0.6rem; }
  .cameo-dig { width: 68px; top: -0.4rem; right: 0.6rem; }
  .dig-hole { border-width: 2px; }
  .love-star { width: 9px; height: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .cameo-kick img, .cameo-kick .buddy-star,
  .cameo-love img, .cameo-dig img, .grawlix { animation: none; }
  .love-star, .dig-dirt { display: none; }
}

/* ---------- what we build: the homepage's route to the solution pages ---------- */
.builds-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
}
/* Four cards, so the old straight 3-to-1 drop would have stranded one card
   alone on its own row at desktop. Halve instead: 4, then 2, then 1. */
@media (max-width: 1180px) { .builds-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .builds-grid { grid-template-columns: 1fr; } }

.build-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem 1.3rem 1.3rem;
  text-decoration: none;
  color: inherit;
}
.build-icon { width: 3.2rem; height: auto; }
/* Archivo 900 sentence case, NOT the display face: Bangers is condensed and
   all-caps, which made these product names unreadable at card width. */
.build-name {
  font-family: var(--font-body);
  font-weight: 900;
  font-size: 1.35rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.build-desc { font-size: 0.97rem; line-height: 1.5; }
.build-go {
  margin-top: auto;
  padding-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--blue);
}
.build-card:hover .build-go,
.build-card:focus-visible .build-go { text-decoration: underline wavy var(--yellow); text-underline-offset: 5px; }

/* The reply after a real submit. The form used to hand off to mailto and say
   nothing, so a visitor had no idea whether anything had happened. */
.form-status {
  margin-top: 0.9rem;
  font-family: var(--font-hand);
  font-size: 1.15rem;
  line-height: 1.35;
  background: var(--yellow);
  border: var(--border);
  box-shadow: var(--shadow-ink-sm);
  padding: 0.6em 0.9em;
  transform: rotate(-0.5deg);
}

/* ============================================================
   TAP TARGETS  (Apple HIG, Accessibility > Mobility)
   Minimum control size is 44x44pt on a phone, with 28x28pt the
   absolute floor, and roughly 12pt of padding between bezelled
   controls. A measured pass over all seven pages at 390px found
   the header links at 34-38px tall, the dropdown rows at 42, the
   360 switcher rows at 33, the ROI tabs at 41, and every inline
   prose link that acts as navigation between 17 and 26.

   These rules buy the height back with padding rather than new
   geometry, so nothing moves and nothing looks different: the
   text sits where it sat, the hit box grows around it. Phones
   only, because desktop density is deliberate and its own floor
   (28pt) is already met.
   ============================================================ */
@media (max-width: 700px) {
  /* header: three controls that were 34-38 tall */
  .topbar-right .stories-flip,
  .topbar-right .solutions-flip,
  .topbar-right .btn-small {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  /* and they sat 7-8px apart, under the ~12pt the HIG asks for */
  .topbar-right { gap: 0.85rem; }

  /* the Solutions dropdown rows: 42 -> 48 */
  .solutions-item { padding: 1.05rem 0.7rem; }

  /* Links that sit on their own line and act as navigation. These can take
     inline-block and real padding, because there is no neighbouring text on
     the line for the grown hit box to collide with.

     Links inside a running sentence are deliberately NOT here. Reaching 44px
     on those would mean the hit box of one line overlapping the line above it,
     which trades one mis-tap for another. WCAG 2.5.8 exempts targets whose
     size is constrained by the line height of the text around them, and that
     is the honest reading here too. */

  /* the contact form's topic chips sat at 42, and the comic strip titles that
     link through to a product page at 36 */
  .chip span { padding: 0.5em 0.8em; }
  .strip-title a { display: inline-block; padding-block: 0.25em; }
}

/* Very narrow phones keep the tighter gap they need to fit one row,
   but not the 0.4rem that put two controls 7px apart. */
@media (max-width: 360px) {
  .topbar-right { gap: 0.6rem; }
  /* the wordmark drops to 1.6rem here, which takes its box to 40 tall. It is
     a link home, so it needs the same 44 as everything else. Caught only at
     360: the first sweep ran 390 and 1440 and this sits between them. */
  .wordmark { min-height: 44px; display: inline-flex; align-items: center; }
}

/* Standalone navigational links, at every width. See the tap-target note
   above: 28pt is the desktop minimum and these were 21 to 26 tall. */
.footer a,
.footer-signal-link,
.fail-answer a,
.build-go,
.stories-flip-big {
  display: inline-block;
  padding-block: 0.35em;
}

/* phones want the full 44, and this has to come after the rule above:
   same specificity, so source order is what decides. */
@media (max-width: 700px) {
  .footer a,
  .footer-signal-link,
  .fail-answer a,
  .build-go,
  .stories-flip-big { padding-block: 0.72em; }
}

/* The last two crowded pairs the HIG sweep found: stacked calls to action
   sitting ~7.6px apart once they wrap on a phone. Two extra millimetres of
   gap is the difference between hitting the one you meant and the one you
   did not. Scoped through .sol-hero so it outranks the page-local rule. */
@media (max-width: 700px) {
  .sol-hero .sol-hero-actions { gap: 1.2rem; }
}