/* Ceyntel "Signal" layer: the brand's DAIT CC Morse pattern, the firefly cursor and
   the small motions that tie the landing page and brand page together.
   Rules it keeps (from /brand): square geometry, one lit row in view, red/black/white,
   the pattern never recoloured, rotated or stretched, and nothing that moves for
   people who asked for reduced motion. */

:root {
  --sig-red: #E00C16;
  --sig-glow: #FF5A5A;
  --sig-ember: #B80A13;
  --sig-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html { -webkit-tap-highlight-color: transparent; }

/* ------------------------------------------------------------------ */
/* Firefly cursor (fine pointers only; touch keeps the system cursor)  */
/* ------------------------------------------------------------------ */
.ff { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.25s ease-out; }
html.ff-on .ff.is-live { opacity: 1; }
html.ff-on, html.ff-on * { cursor: none !important; }
html.ff-on input, html.ff-on textarea, html.ff-on [contenteditable="true"] { cursor: text !important; }
/* Text keeps the I-beam so selecting and copying stays easy; the firefly steps aside. */
html.ff-on p, html.ff-on li, html.ff-on dd, html.ff-on td, html.ff-on h1, html.ff-on h2, html.ff-on h3 { cursor: text !important; }
html.ff-on a *, html.ff-on button * { cursor: none !important; }
.ff.is-text { opacity: 0 !important; }
@media (forced-colors: active) { html.ff-on, html.ff-on * { cursor: auto !important; } .ff { display: none !important; } }

.ff__dot, .ff__ring { position: absolute; left: 0; top: 0; will-change: transform; }
.ff__dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--sig-glow);
  box-shadow: 0 0 6px 1px rgba(224, 12, 22, 0.85), 0 0 18px 4px rgba(224, 12, 22, 0.35);
  transition: width 0.18s var(--sig-ease), height 0.18s var(--sig-ease), margin 0.18s var(--sig-ease), background-color 0.12s ease-out, opacity 0.2s;
}
/* Four corner brackets: a viewfinder that locks onto what you can click. */
.ff__ring {
  width: 30px; height: 30px; opacity: 0.55;
  --b: 1.5px; --l: 7px; --c: rgba(255, 90, 90, 0.9);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) var(--b), linear-gradient(var(--c), var(--c)) 0 0 / var(--b) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) var(--b), linear-gradient(var(--c), var(--c)) 100% 0 / var(--b) var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) var(--b), linear-gradient(var(--c), var(--c)) 0 100% / var(--b) var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) var(--b), linear-gradient(var(--c), var(--c)) 100% 100% / var(--b) var(--l);
  background-repeat: no-repeat;
  transition: opacity 0.2s ease-out;
}
.ff.is-target .ff__ring { opacity: 1; --c: #E00C16; --l: 9px; }
.ff.is-target .ff__dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; }
.ff.is-down .ff__ring { opacity: 1; --l: 12px; }
.ff.is-down .ff__dot { background: #fff; }
/* When the pointer rests, the firefly blinks the way fireflies do: a slow pulse, then dark. */
.ff.is-idle .ff__dot { animation: ff-blink 2.4s ease-in-out infinite; }
@keyframes ff-blink { 0%, 100% { opacity: 1; } 45% { opacity: 1; } 60% { opacity: 0.15; } 75% { opacity: 1; } }
/* Morse playback for the "dait" easter egg: driven from JS by toggling this class. */
.ff.is-flash .ff__dot { background: #fff; box-shadow: 0 0 10px 3px rgba(255, 90, 90, 1), 0 0 34px 10px rgba(224, 12, 22, 0.6); }

/* ------------------------------------------------------------------ */
/* Read progress: one lit line, like the pattern's one lit row         */
/* ------------------------------------------------------------------ */
.sig-progress { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--sig-ember), var(--sig-red) 60%, var(--sig-glow)); box-shadow: 0 0 10px rgba(224, 12, 22, 0.6); }

/* ------------------------------------------------------------------ */
/* Hero signal field (canvas)                                          */
/* ------------------------------------------------------------------ */
.sig { position: absolute; inset: 0 0 auto 0; height: clamp(760px, 100svh, 1000px); pointer-events: none; z-index: 0; overflow: hidden; }
/* Dim rows: drawn once, masked (calm behind the headline, fading top and bottom) and slid by the compositor. */
.sig__field { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse 52% 300px at 50% var(--calm-y, 300px), rgba(0,0,0,0.06), rgba(0,0,0,0.35) 60%, #000 100%), linear-gradient(to bottom, transparent 0, #000 120px, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 52% 300px at 50% var(--calm-y, 300px), rgba(0,0,0,0.06), rgba(0,0,0,0.35) 60%, #000 100%), linear-gradient(to bottom, transparent 0, #000 120px, #000 55%, transparent 100%);
  mask-composite: intersect; }
.sig__dim { position: absolute; left: 0; top: 0; display: block; will-change: transform; animation: sig-pan 57s linear infinite; }
@keyframes sig-pan { to { transform: translate3d(var(--sig-period, -396px), 0, 0); } }
/* The one lit row: a 20px strip, the only part redrawn while it transmits. */
.sig__lit { position: absolute; left: 0; display: block; }

/* ------------------------------------------------------------------ */
/* Section signal: a static DAIT CC strip above each heading.          */
/* Its own element, not a ::before, so the heading's scroll reveal     */
/* leaves it alone.                                                   */
/* ------------------------------------------------------------------ */
.sbreak {
  width: 354px; max-width: 100%; height: 3px; margin: 3rem auto 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 354 3'%3E%3Cg fill='%23E00C16'%3E%3Crect x='0' width='18' height='3'/%3E%3Crect x='24' width='6' height='3'/%3E%3Crect x='36' width='6' height='3'/%3E%3Crect x='60' width='6' height='3'/%3E%3Crect x='72' width='18' height='3'/%3E%3Crect x='108' width='6' height='3'/%3E%3Crect x='120' width='6' height='3'/%3E%3Crect x='144' width='18' height='3'/%3E%3Crect x='204' width='18' height='3'/%3E%3Crect x='228' width='6' height='3'/%3E%3Crect x='240' width='18' height='3'/%3E%3Crect x='264' width='6' height='3'/%3E%3Crect x='288' width='18' height='3'/%3E%3Crect x='312' width='6' height='3'/%3E%3Crect x='324' width='18' height='3'/%3E%3Crect x='348' width='6' height='3'/%3E%3C/g%3E%3C/svg%3E") 50% 0 / contain no-repeat;
}
.sbreak + .shead { margin-top: 0; }

/* ------------------------------------------------------------------ */
/* Brand pattern in the "How it works" step headers                   */
/* ------------------------------------------------------------------ */
.step__top::before {
  background: url("/static/brand/ceyntel-pattern-dark-low.svg") 0 0 / 396px 440px repeat !important;
  opacity: 0.5 !important;
  animation: sig-drift 60s linear infinite; animation-play-state: paused;
}
/* Drifts only under the pointer, so nothing repaints while you read. */
.step:hover .step__top::before { animation-play-state: running; }
@keyframes sig-drift { to { background-position: 396px 0; } }
.step__top::after { background: linear-gradient(160deg, rgba(224, 12, 22, 0.08), transparent 55%) !important; }

/* ------------------------------------------------------------------ */
/* Consistency pass: one geometry, one title colour, one width         */
/* ------------------------------------------------------------------ */
.ptitle { color: var(--ink) !important; }
.icon-dot { border-radius: 0 !important; color: var(--sig-glow) !important; transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out; }
.plate:hover .icon-dot { box-shadow: inset 0 0 0 1px rgba(224, 12, 22, 0.55); background: rgba(224, 12, 22, 0.08); }
.av, .src i, .filter__in .kv i, .mark, .dots i, .skip { border-radius: 0 !important; }
.swap { background: none !important; padding: 0 0.04em 0.06em !important; }
.swap::after { content: ""; position: absolute; left: 0.04em; right: 0.04em; bottom: 0.02em; height: 0.07em; background: currentColor; opacity: 0.35; transform-origin: 0 50%; animation: sig-underline 3.2s var(--sig-ease) infinite; }
@keyframes sig-underline { 0% { transform: scaleX(0); } 30%, 80% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

/* "Wired into the sources" strip: drop the award laurels for a clean instrument row. */
.laurels { gap: 0 !important; border: 1px solid var(--hair); background: rgba(20, 20, 20, 0.6); }
.laurel { padding: 12px 22px; border-left: 1px solid var(--hair); gap: 0 !important; }
.laurel:first-child { border-left: 0; }
.laurel svg { display: none !important; }
.laurel small { font-family: var(--mono); letter-spacing: 0.08em !important; }
.laurel span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 0; background: var(--ok); box-shadow: 0 0 8px rgba(47, 191, 113, 0.8); animation: sig-live 2.8s ease-in-out infinite; }
.laurel:nth-child(2) span::before { animation-delay: 0.7s; } .laurel:nth-child(3) span::before { animation-delay: 1.4s; } .laurel:nth-child(4) span::before { animation-delay: 2.1s; }
@keyframes sig-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (max-width: 639px) {
  .laurels { display: grid !important; grid-template-columns: 1fr 1fr; width: 100%; }
  .laurel { border-left: 0; justify-content: center; }
  .laurel:nth-child(even) { border-left: 1px solid var(--hair); }
  .laurel:nth-child(n+3) { border-top: 1px solid var(--hair); }
}

/* Buttons: a light passes through the primary action when you point at it. */
.pill--primary { position: relative; overflow: hidden; isolation: isolate; }
.pill--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%); transform: translateX(-120%); }
.pill--primary:hover::after { transform: translateX(120%); transition: transform 0.7s var(--sig-ease); }

/* Header logo: every so often the firefly lights up. */
.hdr .logo__lockup { animation: sig-firefly 11s ease-in-out infinite 3s; }
@keyframes sig-firefly { 0%, 88%, 100% { filter: none; } 91% { filter: drop-shadow(0 0 6px rgba(224, 12, 22, 0.95)); } 93% { filter: none; } 95% { filter: drop-shadow(0 0 8px rgba(255, 90, 90, 0.9)); } }

/* Closing CTA: three fireflies wander in the dark behind the line. */
.close { position: relative; overflow: hidden; }
.close > * { position: relative; z-index: 1; }
.close .fly { position: absolute; z-index: 0; width: 4px; height: 4px; background: var(--sig-glow); box-shadow: 0 0 8px 2px rgba(224, 12, 22, 0.8); opacity: 0; animation: fly-path 14s ease-in-out infinite, fly-blink 3.6s ease-in-out infinite; }
.close .fly:nth-of-type(1) { left: 14%; top: 70%; animation-delay: 0s, 0.4s; }
.close .fly:nth-of-type(2) { left: 82%; top: 30%; animation-duration: 17s, 4.4s; animation-delay: -6s, 1.1s; }
.close .fly:nth-of-type(3) { left: 64%; top: 82%; animation-duration: 20s, 3.1s; animation-delay: -11s, 2s; }
@keyframes fly-path { 0% { translate: 0 0; } 25% { translate: 40px -60px; } 50% { translate: -30px -110px; } 75% { translate: -70px -40px; } 100% { translate: 0 0; } }
@keyframes fly-blink { 0%, 100% { opacity: 0; } 20%, 35% { opacity: 0.95; } 50% { opacity: 0.1; } 62% { opacity: 0.8; } 75% { opacity: 0; } }

/* Report counters tick up (numbers align on the same column). */
.kv .v { font-variant-numeric: tabular-nums; }

/* Mobile menu: a solid sheet, never see-through. */
.mmenu { background: #141414 !important; box-shadow: inset 0 0 0 1px var(--border), 0 18px 40px rgba(0, 0, 0, 0.6) !important; }
.mmenu a { min-height: 48px; display: flex; align-items: center; border-radius: 0 !important; }
.mmenu a + a { border-top: 1px solid var(--hair); }

/* Two-column grids where a third card was removed */
@media (min-width: 900px) { .grid--two { grid-template-columns: repeat(2, 1fr) !important; } }

/* Cookie notice */
.cookie { position: fixed; z-index: 65; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100% - 32px)); padding: 18px 18px 16px; background: #0d0d0d; color: var(--ink, #EDEDED); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 16px 40px rgba(0, 0, 0, 0.6); transform: translateY(16px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease-out, transform 0.35s var(--sig-ease); font-family: "Exo 2", system-ui, sans-serif; }
.cookie::before { content: ""; position: absolute; left: 0; top: 0; width: 42px; height: 2px; background: var(--sig-red); }
.cookie.is-in { opacity: 1; transform: none; pointer-events: auto; }
.cookie__k { margin: 0 0 6px; font: 600 11px "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sig-glow); }
.cookie__t { margin: 0; font-size: 0.875rem; line-height: 1.55; color: #B5B5B5; }
.cookie__t a { color: #EDEDED; text-decoration: underline; text-underline-offset: 3px; }
.cookie__a { margin-top: 14px; display: flex; justify-content: flex-end; }
.cookie__ok { min-height: 40px; padding: 0 18px; border: 0; border-radius: 0; background: var(--sig-red); color: #fff; font: 700 0.875rem "Exo 2", system-ui, sans-serif; cursor: pointer; }
.cookie__ok:hover { background: var(--sig-ember); }
.cookie__ok:focus-visible, .cookie__t a:focus-visible { outline: 2px solid var(--sig-glow); outline-offset: 2px; }
@media (max-width: 639px) {
  .cookie { left: 0; right: 0; bottom: 0; width: 100%; padding: 16px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 -12px 30px rgba(0, 0, 0, 0.6); }
  .cookie__a { justify-content: stretch; }
  .cookie__ok { flex: 1; min-height: 44px; }
}

/* Easter egg note */
.sig-toast { pointer-events: none; position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 70; max-width: calc(100% - 32px); padding: 12px 16px; background: #000; color: #EDEDED; font: 500 12px/1.5 "IBM Plex Mono", monospace; letter-spacing: 0.04em; box-shadow: inset 0 0 0 1px rgba(224, 12, 22, 0.6), 0 8px 30px rgba(224, 12, 22, 0.25); transform: translate(-50%, 12px); opacity: 0; transition: opacity 0.3s ease-out, transform 0.3s var(--sig-ease); }
.sig-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
#main { position: relative; }
#main > .hero { position: relative; z-index: 1; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ */
/* Mobile                                                              */
/* ------------------------------------------------------------------ */
@media (max-width: 639px) {
  .pill { min-height: 44px; }
  .hdr .pill--sm { min-height: 36px; }
  .hero__ctas { width: 100%; }
  .hero__ctas .pill { flex: 1 1 100%; }
  .foot__icons { gap: 2px !important; flex-wrap: nowrap !important; }
  .foot__icons a { width: 44px; height: 44px; }
  .foot__nav { display: grid !important; grid-template-columns: repeat(3, auto); justify-content: center; gap: 4px 28px !important; }
  .foot__nav a { display: inline-flex; align-items: center; min-height: 44px; }
  #menu-btn { width: 44px; height: 44px; }
  .seg button { min-height: 44px; }
  .arc__node { width: 44px !important; height: 44px !important; }
  .faq summary { min-height: 56px; }
  .sbreak { margin-bottom: 20px; }

  /* Comparison: one card per capability instead of a sideways-scrolling table. */
  .cmp { padding: 4px 16px !important; overflow: visible !important; }
  .cmp table { min-width: 0 !important; }
  .cmp thead { display: none; }
  .cmp tbody, .cmp tr, .cmp td { display: block; }
  .cmp tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 14px 0; border-top: 1px solid var(--hair); }
  .cmp tbody tr:first-child { border-top: 0; }
  .cmp tbody tr td { border-top: 0 !important; height: auto !important; padding: 0 !important; text-align: left !important; background: none !important; }
  .cmp tbody tr td:first-child { grid-column: 1 / -1; width: auto !important; margin-bottom: 2px; font-size: 0.9375rem; }
  .cmp tbody tr td:not(:first-child) { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--muted); }
  .cmp tbody tr td:not(:first-child)::after { content: attr(data-l); }
  .cmp tbody tr td.us::after { color: var(--ink); }
}
@media (max-width: 359px) {
  .hero h1 { font-size: 1.85rem; }
  .news { font-size: 0.75rem; white-space: nowrap; max-width: 100%; }
  .laurel { padding: 10px 12px; }
}

/* ------------------------------------------------------------------ */
/* Reduced motion: everything rests in its finished state             */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sig__dim, .step__top::before, .swap__w, .laurel span::before, .hdr .logo__lockup, .close .fly, .ff.is-idle .ff__dot { animation: none !important; }
  .close .fly { display: none; }
  .pill--primary::after { display: none; }
}