/* ============================================================
   Annota8 — Base + shared components
   The signature motif: the site annotates itself. Bounding boxes
   draw around headlines, label pills tag content, scan-lines sweep.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--brand); color: #fff; }

/* ---------- Accessibility: skip link ---------- */
.skip-link{position:absolute;left:1rem;top:0;transform:translateY(-130%);background:var(--fg);color:var(--bg);padding:0.5em 1em;border-radius:0 0 8px 8px;z-index:9999;font:600 var(--small)/1 var(--font-ui,sans-serif);text-decoration:none;transition:transform var(--t-fast) var(--ease-out);}
.skip-link:focus{transform:translateY(0);}

/* ---------- Accessibility: focus-visible ---------- */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px;}
.btn:focus-visible,.a8nav__cta:focus-visible,.a8nav__lang:focus-visible,.a8nav__theme:focus-visible{outline-offset:4px;border-radius:9999px;}
.tools-cine__tab:focus-visible,.show-chip:focus-visible,.sops-cine__btn:focus-visible,.twall__card:focus-visible,.backer-card:focus-visible,.rm-logo:focus-visible{outline:2px solid var(--brand);outline-offset:4px;}
.kp-faq__q:focus-visible,.kp-langtoggle button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

h1, h2, h3 { font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.02em; }
/* Arabic/RTL headings: negative tracking breaks Arabic's cursive letter-joining, and
   very tight Latin line-heights collide with Arabic diacritics. Reset both for RTL.
   (The hero h1 RTL line-height lives next to its rule in sections.css.) */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .tools-engine__title, [dir="rtl"] .backers__title, [dir="rtl"] .sx-h2 { letter-spacing: 0; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { line-height: 1.2; }
[dir="rtl"] .tools-engine__title { line-height: 1.12; }
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); font-family: var(--font-ui); }
.serif-accent { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: 0; }
.grad-text {
  background: linear-gradient(92deg, var(--brand) 0%, var(--brand-alt) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
section { position: relative; }
.section-pad { padding-block: var(--s7); }

/* ---------- Register: day (paper) sections ---------- */
.register-day {
  background: var(--day-bg);
  color: var(--day-fg);
}
.register-day .eyebrow { color: var(--day-fg3); }
.register-day p { color: var(--day-fg2); }

/* ---------- Eyebrow + section headers ---------- */
/* Eyebrow — exact live-site treatment (Space Grotesk 11px / 600 / 0.24em caps) */
.eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--fg3);
  margin-bottom: var(--s3);
}
p.lead { font-size: var(--lead); color: var(--fg2); max-width: 56ch; }
p { color: var(--fg2); }

/* ---------- Annotation motif: bounding box around headlines ---------- */
.bbox-wrap { position: relative; display: inline-block; }
.bbox-wrap .bbox-frame {
  position: absolute; top: -0.18em; left: -0.35em;
  width: calc(100% + 0.7em); height: calc(100% + 0.36em);
  pointer-events: none;
}
.bbox-frame rect {
  fill: none; stroke: var(--brand-alt); stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.bbox-frame .corner { fill: var(--brand-alt); }
.bbox-label {
  position: absolute; top: 0; left: -0.35em;
  transform: translateY(-115%);
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.06em;
  background: var(--brand-alt); color: var(--ink);
  padding: 0.18em 0.6em; border-radius: 4px 4px 4px 0;
  opacity: 0; white-space: nowrap;
}
.bbox-label .conf { opacity: 0.65; margin-left: 0.45em; }

/* ---------- Label pills (class chips) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-ui); font-size: var(--small); font-weight: 500;
  padding: 0.38em 0.95em; border-radius: var(--r-pill);
  border: 1px solid var(--card-border);
  background: rgba(255,255,255,0.04);
  color: var(--fg2);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-alt); }
.pill--brand { border-color: rgba(63,111,200,0.4); color: var(--brand-ink-strong); background: rgba(63,111,200,0.08); }
.pill--live .dot { background: var(--success); box-shadow: 0 0 12px var(--success); }
.pill--next .dot { background: var(--gold); box-shadow: 0 0 12px var(--gold); }

/* Release badges — vocabulary per COPY_RULES (LIVE/NEXT/AFTER/VISION) */
.badge {
  font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.28em 0.7em; border-radius: 4px;
}
.badge--live  { background: rgba(0,168,138,0.15); color: var(--teal-ink); border: 1px solid rgba(0,168,138,0.35); }
.badge--next  { background: rgba(255,215,0,0.12); color: var(--gold); border: 1px solid rgba(255,215,0,0.3); }
.badge--after { background: rgba(255,255,255,0.06); color: var(--fg2); border: 1px solid var(--card-border); }
.badge--vision{ background: rgba(63,111,200,0.12); color: var(--brand-ink-strong); border: 1px solid rgba(63,111,200,0.3); }

/* ---------- Buttons ---------- */
/* Buttons — exact live-site shapes: 13px/26px pill, 13px Geist-inherit,
   primary = cta-bg white pill, ghost = 1px cardBorder outline */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit; font-weight: 600; font-size: 13px;
  letter-spacing: 0.02em;
  padding: 13px 26px; border-radius: 9999px; border: none;
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--cta-bg); color: var(--cta-fg); }
.btn--primary:hover { box-shadow: 0 12px 40px rgba(255,255,255,0.18); }
.btn--brand { background: var(--cta-bg); color: var(--cta-fg); }
.btn--brand:hover { box-shadow: 0 12px 40px rgba(255,255,255,0.18); }
.btn--ghost {
  background: transparent; color: var(--fg);
  border: 1px solid var(--card-border); font-weight: 500;
}
.btn--ghost:hover { border-color: var(--fg3); }
.btn .arrow { transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Cards ---------- */
.card {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: var(--s4);
  backdrop-filter: blur(8px);
}

/* ---------- Atmosphere ---------- */
.grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}
.glow-field {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.glow-field::before, .glow-field::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(120px); opacity: 0.22;
}
.glow-field::before { width: 56vw; height: 56vw; background: var(--brand); top: -22vw; left: -14vw; }
.glow-field::after  { width: 44vw; height: 44vw; background: var(--brand-alt); bottom: -18vw; right: -10vw; opacity: 0.12; }

/* Scan-line that sweeps a section (OCR motif) */
.scanline {
  position: absolute; left: 0; right: 0; height: 2px; top: 0;
  background: linear-gradient(90deg, transparent, var(--brand-alt), transparent);
  box-shadow: 0 0 24px var(--brand-alt);
  opacity: 0; pointer-events: none;
}

/* ---------- Reveal defaults (GSAP sets final state) ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); }
html.no-js [data-reveal] { opacity: 1; transform: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Annota8 brand backdrop — inlined from
   docs/brand-assets/annota8-bg-cursor-halo.html
   Soft wash + 24px dotgrid + cursor halo + 3 pastel corner rings.
   Fixed layer behind all content; the full-bleed hero scene covers
   it during the dive, so the backdrop reveals AFTER the zoom.

   Washes live on the FIXED .a8-bg layer (NOT on body) so the gradient
   renders in EVERY viewport — body bg maps to whole-document height, so
   washes on body only show at page top/bottom and middle goes plain white.
   Body itself stays a plain #FCFCFE base (see the `body { }` rule).
   ============================================================ */
:root {
  /* Matched to the floating sign-in window's own art so page + floating
     card read as ONE continuous background: lavender top-left, faint
     pink-lavender top-right, mint bottom corners, near-white base. */
  --a8-bg-washes:
    radial-gradient(85% 75% at 4% 0%,   #DCE5F5 0%, rgba(229,224,245,0) 62%),
    radial-gradient(70% 60% at 99% 3%,  #E8EEF8 0%, rgba(241,231,243,0) 55%),
    radial-gradient(85% 75% at 2% 100%, #DFF3E8 0%, rgba(223,243,232,0) 62%),
    radial-gradient(70% 60% at 100% 100%, #EAF7EC 0%, rgba(234,247,236,0) 55%),
    linear-gradient(180deg, #FCFCFE 0%, #FAFAF6 100%);
}
.a8-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background: var(--a8-bg-washes); }   /* washes live on the FIXED layer so the gradient shows in every viewport, not just page top/bottom */
.a8-bg .a8-rings {
  position: absolute; width: 1200px; height: 1200px; border-radius: 50%;
  background: repeating-radial-gradient(circle at center,
      transparent 0, transparent 60px,
      rgba(63,111,200, 0.04) 60px, rgba(63,111,200, 0.04) 61px,
      transparent 61px, transparent 120px);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
          mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
}
.a8-bg .a8-rings--tl { top: -650px; left: -650px; }
.a8-bg .a8-rings--bl {
  bottom: -650px; left: -750px;
  background: repeating-radial-gradient(circle at center,
      transparent 0, transparent 70px,
      rgba(91,184,232, 0.04) 70px, rgba(91,184,232, 0.04) 71px,
      transparent 71px, transparent 140px);
}
.a8-bg .a8-rings--tr {
  top: -800px; right: -700px; width: 1400px; height: 1400px;
  background: repeating-radial-gradient(circle at center,
      transparent 0, transparent 90px,
      rgba(207, 219, 241, 0.20) 90px, rgba(207, 219, 241, 0.20) 91px,
      transparent 91px, transparent 180px);
}
/* ambient soft dotgrid (was body::before) */
.a8-bg .a8-dotgrid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11, 15, 25, 0.07) 0.9px, transparent 1.8px);
  background-size: 24px 24px;
  filter: blur(0.6px); opacity: 1;
}
/* sharper dots revealed inside a 240px cursor halo (was body::after) */
.a8-bg .a8-halo {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(11, 15, 25, 0.16) 1.2px, transparent 2px);
  background-size: 24px 24px;
  -webkit-mask: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 30%), rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
          mask: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 30%), rgba(0,0,0,1) 0%, rgba(0,0,0,0) 75%);
  transition: -webkit-mask 80ms linear, mask 80ms linear;
}
/* dark-mode swap — only if [data-color-scheme="dark"] is set on <html> */
[data-color-scheme="dark"] body { background: linear-gradient(180deg, #0b0f19 0%, #11152a 100%); color: #f4f4f8; }
[data-color-scheme="dark"] .a8-bg .a8-dotgrid { background-image: radial-gradient(rgba(255,255,255,0.05) 0.8px, transparent 1.8px); }
[data-color-scheme="dark"] .a8-bg .a8-halo    { background-image: radial-gradient(rgba(255,255,255,0.18) 1.2px, transparent 2px); }
[data-color-scheme="dark"] .a8-bg .a8-rings    { background: repeating-radial-gradient(circle at center, transparent 0, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 61px, transparent 61px, transparent 120px); }
[data-color-scheme="dark"] .a8-bg .a8-rings--bl{ background: repeating-radial-gradient(circle at center, transparent 0, transparent 70px, rgba(91,184,232,0.022) 70px, rgba(91,184,232,0.022) 71px, transparent 71px, transparent 140px); }
[data-color-scheme="dark"] .a8-bg .a8-rings--tr{ background: repeating-radial-gradient(circle at center, transparent 0, transparent 90px, rgba(63,111,200,0.022) 90px, rgba(63,111,200,0.022) 91px, transparent 91px, transparent 180px); }

/* backdrop: let the register-day sections show the fixed .a8-bg through */
.register-day { background: transparent; color: var(--day-fg); }