/* ==========================================================================
   AP Collective — "Signal" (6 Oct 2026)
   Graphite and acid lime. Loaded last on every page, so it overrides the
   older layers by token first and by component second. Dark only.
   ========================================================================== */

@font-face { font-family:'Archivo'; src:url('/assets/fonts/archivo-latin-standard-normal.woff2') format('woff2'); font-weight:100 900; font-stretch:62% 125%; font-display:swap; }
@font-face { font-family:'Doto'; src:url('/assets/fonts/doto-latin-wght-normal.woff2') format('woff2'); font-weight:100 900; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url('/assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); font-weight:500 700; font-display:swap; }

/* --------------------------------------------------------------- tokens */
:root, [data-theme], [data-theme='light'], [data-theme='dark'] {
  color-scheme: dark;
  --lime: #c6ff3d;
  --lime-2: #b4f02a;
  --lime-ink: #0b0c0e;

  --brand: var(--lime);
  --brand-deep: var(--lime-2);
  --brand-lift: var(--lime);
  --brand-pale: #dcff8f;
  --signal: var(--lime);
  --design-accent: var(--lime);
  --on-brand: var(--lime-ink);

  --bg: #0b0c0e;
  --bg-2: #0f1113;
  --surface: rgba(255,255,255,.03);
  --surface-2: rgba(255,255,255,.055);
  --surface-solid: #131518;
  --border: rgba(255,255,255,.085);
  --border-strong: rgba(255,255,255,.16);
  --border-brand: rgba(198,255,61,.32);
  --control-border: rgba(255,255,255,.22);

  --text: #eef0ea;
  --text-2: #a7aba3;
  --text-3: #868a83;

  --glow-a: transparent;
  --glow-b: transparent;
  --grid-line: transparent;
  --shadow-lg: 0 40px 120px -40px rgba(0,0,0,.9);
  --shadow-card: 0 30px 80px -40px rgba(0,0,0,.95);

  --glass-bg: rgba(17,19,22,.58);
  --glass-blur: 18px;
  --sig-glass: rgba(17,19,22,.55);
  --sig-glass-strong: rgba(14,16,18,.78);

  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-dot: 'Doto', 'JetBrains Mono', ui-monospace, monospace;

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
}

/* --------------------------------------------------------------- base */
html { background: var(--bg); }
body { background: transparent; color: var(--text); font-family: var(--font-body); font-stretch: 100%; }
::selection { background: var(--lime); color: var(--lime-ink); }
:focus-visible { outline-color: var(--lime) !important; }

h1, h2, h3, .sx-h2, .launch-hero h1 {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 640;
  letter-spacing: -0.035em;
}
h1, .launch-hero h1 { font-weight: 680; letter-spacing: -0.045em; line-height: .98; }
h3 { font-stretch: 106%; letter-spacing: -0.02em; font-weight: 600; }

/* Kill the old purple gradients on emphasised words. */
h1 em, h2 em, .hl, .grad, h1 .hl {
  background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important; color: var(--lime) !important; font-style: normal;
}

a { text-underline-offset: .2em; }
.text-link, .text-button, .prose a, .sx-note a, .wx-pack-note a { color: var(--brand-pale); }

/* Eyebrows read like status readouts. */
.eyebrow, .sx-kicker, .route__k, .project-visual__label {
  font-family: var(--font-mono) !important; color: var(--lime) !important;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
}
.eyebrow--dot::before, .eyebrow::before { background: var(--lime) !important; box-shadow: 0 0 0 4px rgba(198,255,61,.14), 0 0 14px rgba(198,255,61,.6); border-radius: 50%; }

/* --------------------------------------------------------------- background film */
/* Gemini films, looped. Fixed behind the page, strongest behind the hero, fading as you scroll. */
.sig-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--bg); }
.sig-bg__media {
  position: absolute; top: 0; right: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  opacity: var(--sig-o, .62);
  transition: opacity .25s linear;
  -webkit-mask-image: radial-gradient(ellipse 62% 68% at 50% 45%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 68% at 50% 45%, #000 45%, transparent 100%);
}
/* Desktop: the film sits to the right, behind the cards, so headlines stay on clear background. */
@media (min-width: 761px) {
  .sig-bg__media { width: 60%; object-position: 50% 50%; }
  .sig-bg--panes .sig-bg__media { width: 62%; object-position: 50% 62%; }
}
/* Keep hero copy crisp wherever the film passes behind it. */
.launch-hero .lede, .intro .lede, .pagehead .lede, main > section:first-child .lede { text-shadow: 0 1px 18px rgba(11,12,14,.95), 0 0 2px rgba(11,12,14,.9); }
@media (max-width: 760px) {
  .sig-bg__media { object-position: 50% 30%; }
}

/* Sections let the render show through. */
.launch-section--tint, .sx-section, .launch-cta, .cta { background: transparent !important; }
.launch-section--tint { background: linear-gradient(180deg, rgba(11,12,14,.0), rgba(11,12,14,.55) 12%, rgba(11,12,14,.55) 88%, rgba(11,12,14,0)) !important; }
.launch-footer { background: rgba(9,10,12,.86) !important; backdrop-filter: blur(12px); border-top: 1px solid var(--border); }

/* --------------------------------------------------------------- nav */
.nav { background: rgba(11,12,14,.55) !important; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--border) !important; }
.nav__link { color: var(--text-2); font-weight: 500; }
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--text); }
.nav__link[aria-current="page"]::after { background: var(--lime) !important; }
.footer-wordmark span, .brand span { color: var(--lime) !important; }

/* --------------------------------------------------------------- buttons */
.btn { border-radius: 8px !important; font-family: var(--font-display); font-stretch: 108%; font-weight: 600; letter-spacing: -.01em; }
.btn--primary, .btn--primary:hover, .launch-section .btn--primary {
  background: var(--lime) !important; color: var(--lime-ink) !important; border-color: var(--lime) !important;
  box-shadow: 0 0 0 1px rgba(198,255,61,.3), 0 14px 40px -14px rgba(198,255,61,.55) !important;
}
.btn--primary:hover { background: #d4ff66 !important; transform: translateY(-1px); }
.btn--primary::after { opacity: 0 !important; }
.btn--ghost, .btn--secondary {
  background: rgba(255,255,255,.04) !important; color: var(--text) !important;
  border: 1px solid var(--border-strong) !important; backdrop-filter: blur(10px);
}
.btn--ghost:hover { border-color: var(--lime) !important; color: var(--lime) !important; }

/* --------------------------------------------------------------- glass surfaces */
.route, .wx-pack, .side-offer, .check-card, .sx-card, .sx-stage, .plain-card, .browser-frame, .week-board,
.tool-strip__group, .sx-row, .sx-facts > div, .faq details, details.faq__item, .chain-step, .dept, .safe-card,
.hero-routes__foot, .sx-portrait, .contact-layout aside, .field input, .field textarea, .field select {
  background: var(--sig-glass) !important;
  border: 1px solid var(--border) !important;
  backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-card) !important;
}
.route, .wx-pack, .side-offer, .check-card {
  border-radius: var(--r-lg) !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--sig-glass), var(--sig-glass)) padding-box,
    linear-gradient(155deg, rgba(198,255,61,.42), rgba(255,255,255,.07) 28%, rgba(255,255,255,.03) 70%, rgba(198,255,61,.16)) border-box !important;
}
.route:hover, .wx-pack:hover { border-color: rgba(198,255,61,.38) !important; }
.wx-pack--featured { border-color: rgba(198,255,61,.5) !important; box-shadow: inset 0 1px 0 rgba(198,255,61,.25), 0 0 0 1px rgba(198,255,61,.12), var(--shadow-card) !important; }
.wx-pack__badge { background: var(--lime) !important; color: var(--lime-ink) !important; font-family: var(--font-mono); }
.hero-routes__foot { border-style: dashed !important; }

/* Prices and big figures in dot-matrix. */
.route__price, .wx-pack__price, .sx-facts strong, .sx-step__n {
  font-family: var(--font-dot) !important; font-weight: 800 !important; letter-spacing: .02em; color: var(--lime) !important;
}
.wx-pack__price { font-size: clamp(2.4rem, 2rem + 1.6vw, 3.4rem) !important; line-height: 1; }
.route__price { font-size: 1.45rem !important; }

/* List bullets and ticks go lime. */
.route li::before, .sx-trust span::before { background: var(--lime) !important; }
.route__h, .route h3 { font-stretch: 106%; }
.route a, .route [aria-hidden="true"] { color: var(--lime); }

/* Trust strip and marquee. */
.sx-trust span { color: var(--text-2); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.tool-strip__logo, .sx-marquee img, .marquee__item img { color: var(--text-2); filter: none !important; opacity: .8; }

/* Steps, story and examples use lime as the active colour. */
.sx-step--you, .sx-approve, .sx-pills span.is-on { border-color: rgba(198,255,61,.45) !important; }
.sx-approve, .sx-draft__actions .is-primary { background: var(--lime) !important; color: var(--lime-ink) !important; }
[data-theme] .sx-after b, [data-theme] .sx-career li:last-child b { color: var(--lime) !important; }

/* Ask AP launcher and dialog. */
.assistant-launcher { background: var(--lime) !important; color: var(--lime-ink) !important; border: 0 !important; box-shadow: 0 16px 40px -14px rgba(198,255,61,.6) !important; font-family: var(--font-display); font-weight: 600; }

/* Hide anything the old look used purely for glow. */
.hero__aurora, .hero__bg::before, .pagehead__bg::before, .cta::before, .card::before, .btn::before { display: none !important; }
.launch-hero, .pagehead, .intro { background: transparent !important; }
.flow-scene::before { background: rgba(198,255,61,.07) !important; }

/* --------------------------------------------------------------- premium finish (7 Oct 2026) */
/* A faint film grain over everything, so flat dark areas feel printed rather than empty. */
body::after {
  content: ''; position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: .045;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  body::after { animation: sig-grain 1.2s steps(4) infinite; }
  @keyframes sig-grain { 0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); } 50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); } 100% { transform: translate(0,0); } }
}
/* Calmer, more generous rhythm and bigger headlines. */
.launch-hero h1 { font-size: clamp(3rem, 1.6rem + 4.6vw, 5.6rem); }
h2, .sx-h2 { letter-spacing: -.04em; }
.lede { color: var(--text-2); max-width: 58ch; }
/* Buttons: a soft lift and a lime halo, no shine sweep. */
.btn { transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .2s, border-color .2s, color .2s !important; }
.btn--primary:hover { box-shadow: 0 0 0 1px rgba(198,255,61,.45), 0 18px 50px -12px rgba(198,255,61,.65) !important; }
/* Cards rise slightly on hover. */
@media (hover: hover) {
  .route, .wx-pack, .side-offer { transition: transform .45s var(--ease), border-color .3s; }
  .route:hover, .wx-pack:hover, .side-offer:hover { transform: translateY(-3px); }
}