/*!
 * wa8-services.css
 * © 2026 WeActive8 LLC. All rights reserved.
 *
 * Shared scoped CSS for the /services/* pages and the 404 surface.
 * Rules namespaced under .svc-* so they don't collide with the homepage
 * or other surfaces. Extracted from inline component <style> blocks in
 * Wave 13 (2026-05-18) — the previous inline rendering shipped these
 * ~21 KB rules in the RSC payload of every route via the Next.js
 * not-found boundary, even on routes that never display the 404 page.
 */

/* ─── components/v3/services/ServicePageStyles.tsx ─────────────── */
.svc-root {
        --svc-ink: #0B0B12;
        --svc-text: #0f172a;
        --svc-text-muted: #475569;
        --svc-text-on-dark: #f8fafc;
        --svc-text-on-dark-muted: rgba(248,250,252,0.62);
        --svc-bg: #ffffff;
        --svc-bg-tinted: #f4f5f7;
        --svc-border: #e2e8f0;
        --svc-blue: #2368ef;
        --svc-yellow: #E9FC00;
        color: var(--svc-text);
        background: var(--svc-bg);
      }

      /* HERO SHELL */
      .svc-hero-shell {
        position: relative;
        background: #1E55C8;
        color: #ffffff;
        overflow: hidden;
        min-height: clamp(560px, 68vh, 760px);
        padding: clamp(104px, 12vw, 144px) 24px clamp(120px, 15vw, 168px);
      }
      .svc-bg-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
      .svc-hero-blob-wrapper {
        position: absolute; width: 0; height: 0; pointer-events: none; will-change: transform;
      }
      .svc-hero-blob-wrapper-a { top: 5%;   left: 6%;   animation: svc-blob-drift-a 14s ease-in-out infinite; }
      .svc-hero-blob-wrapper-b { top: 30%;  right: 8%;  animation: svc-blob-drift-b 18s ease-in-out infinite; }
      .svc-hero-blob-wrapper-c { bottom: 12%; left: 42%; animation: svc-blob-drift-c 16s ease-in-out infinite; opacity: 0.6; }
      .svc-bg-blobs .blob {
        font-size: clamp(420px, 38vw, 720px);
        filter: blur(88px);
        opacity: 0.95;
      }
      .svc-hero-blob-wrapper .blob:nth-child(2) {
        transform: translate(180px, 110px);
      }
      @keyframes svc-blob-drift-a {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33%      { transform: translate(12vw, 6vh) rotate(40deg); }
        66%      { transform: translate(-6vw, 10vh) rotate(-30deg); }
      }
      @keyframes svc-blob-drift-b {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33%      { transform: translate(-10vw, 8vh) rotate(-45deg); }
        66%      { transform: translate(8vw, -4vh) rotate(25deg); }
      }
      @keyframes svc-blob-drift-c {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        33%      { transform: translate(8vw, -7vh) rotate(35deg); }
        66%      { transform: translate(-12vw, -3vh) rotate(-20deg); }
      }
      @media (prefers-reduced-motion: reduce) {
        .svc-hero-blob-wrapper { animation: none !important; }
      }
      .svc-hero-shell .svc-grid-bg { z-index: 2; opacity: 0.45; }
      .svc-hero-shell .svc-noise-bg { z-index: 3; opacity: 1; }
      .svc-hero-shell::after {
        content: ""; position: absolute; right: 20px; bottom: 20px;
        height: clamp(280px, 44vh, 460px);
        aspect-ratio: 398 / 765;
        background-image: url("/v3-fragments/8-glass.svg");
        background-repeat: no-repeat; background-size: contain;
        background-position: right center;
        pointer-events: none; z-index: 4; opacity: 0.9;
      }
      @media (max-width: 900px) {
        .svc-hero-shell::after {
          right: 12px; bottom: 12px;
          height: clamp(220px, 38vh, 360px); opacity: 0.55;
        }
      }
      .svc-hero-grid {
        position: relative; z-index: 5;
        max-width: 1180px; margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: clamp(28px, 4vw, 64px);
        align-items: center;
      }
      @media (max-width: 920px) { .svc-hero-grid { grid-template-columns: 1fr; } }
      .svc-hero-text { color: #ffffff; }
      .svc-hero-eyebrow {
        font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
        text-transform: uppercase; color: rgba(255,255,255,0.78);
        margin-bottom: 18px;
      }
      .svc-hero-h1 {
        font-size: clamp(36px, 5vw, 64px);
        line-height: 1.06;
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 0 0 18px;
        color: #ffffff;
      }
      .svc-hero-sub {
        font-size: clamp(15px, 1.3vw, 18px);
        line-height: 1.55;
        color: rgba(255,255,255,0.82);
        margin: 0 0 28px;
        max-width: 56ch;
      }
      .svc-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
      .svc-hero-trust-row {
        list-style: none; padding: 0; margin: 24px 0 0;
        display: flex; flex-wrap: wrap; gap: 8px 22px;
        font-size: 13px; color: rgba(255,255,255,0.72);
      }
      .svc-hero-trust-row li {
        display: inline-flex; align-items: center; gap: 8px;
      }
      .svc-hero-trust-row li::before {
        content: ""; width: 6px; height: 6px; border-radius: 50%;
        background: var(--svc-yellow); display: inline-block;
      }

      /* HERO CTAs.
         Primary stays lime (svc-yellow). Secondary moved to the
         canonical wa8-cta-glass dark-translucent style — same
         pattern the chrome's hero "Get Activated" button uses,
         saved as the brand's official secondary CTA per founder
         design library (image 60 reference). The old white CTA
         with the revolving conic-gradient arc is retired. */
      .svc-hero-cta {
        display: inline-flex; align-items: center; justify-content: center;
        padding: 14px 22px;
        font-size: 15px; font-weight: 600;
        text-decoration: none;
        border-radius: 999px;
        transition: background 0.2s ease, color 0.2s ease,
                    border-color 0.2s ease;
        position: relative; isolation: isolate;
      }
      /* Primary lime. Chevron slot pre-allocated (constant gap +
         width) so the text never shifts; the chevron just fades in
         on hover with a 4px translateX nudge. */
      .svc-hero-cta-primary {
        background: var(--svc-yellow); color: #0B0B12;
        box-shadow: 0 6px 16px rgba(233,252,0,0.32);
        gap: 8px;
      }
      .svc-hero-cta-primary::after {
        content: "";
        display: inline-block;
        width: 0.55em;
        height: 0.55em;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12' fill='none' stroke='%230B0B12' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2,2 6,6 2,10'/%3E%3C/svg%3E");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 1;
        transform: translateX(0);
        transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .svc-hero-cta-primary:hover { background: #DDEF00; }
      .svc-hero-cta-primary:hover::after {
        transform: translateX(3px);
      }
      /* wa8-cta-glass.
         Idle: dark glass pill, white text, zero border.
         Hover: lightens to a brighter blue + a white border traces
         from top-middle clockwise around the perimeter (700ms).
         Hover-out: same trace runs reverse and the border erases.
         Pure CSS via @property + conic-gradient. */
      @property --wa8-cta-trace {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
      }
      .svc-hero-cta-secondary {
        position: relative;
        background: rgba(15, 30, 80, 0.42);
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);
        color: #ffffff;
        border: 0;
        isolation: isolate;
        --wa8-cta-trace: 0deg;
        transition: background 320ms ease;
      }
      .svc-hero-cta-secondary::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 2px;
        background: conic-gradient(
          from 0deg,
          rgba(255, 255, 255, 0.92) 0deg,
          rgba(255, 255, 255, 0.92) var(--wa8-cta-trace),
          transparent var(--wa8-cta-trace),
          transparent 360deg
        );
        -webkit-mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        pointer-events: none;
        transition: --wa8-cta-trace 700ms cubic-bezier(0.6, 0, 0.4, 1);
      }
      .svc-hero-cta-secondary:hover {
        background: rgba(35, 60, 130, 0.5);
      }
      .svc-hero-cta-secondary:hover::before {
        --wa8-cta-trace: 360deg;
      }
      @media (prefers-reduced-motion: reduce) {
        .svc-hero-cta-secondary,
        .svc-hero-cta-secondary::before { transition: none; }
      }

      /* HERO right card-stack */
      .svc-hero-rightcard {
        position: relative; width: 100%; max-width: 460px;
        margin-left: auto;
        aspect-ratio: 3 / 4;
      }
      .svc-hero-card,
      .svc-hero-card-page {
        position: absolute; inset: 0;
        border-radius: 18px;
        background: linear-gradient(135deg, #45B8FF 0%, #2368EF 55%, #6346F2 100%);
        box-shadow: 0 24px 60px rgba(0,0,0,0.32);
        transform-origin: 50% 100%;
        will-change: transform, opacity;
      }
      .svc-hero-card-page {
        background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.04));
        border: 1px solid rgba(255,255,255,0.18);
        opacity: 0;
        transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1), opacity 600ms ease-out;
      }
      .svc-hero-card-page--1 { transition-delay: 90ms; }
      .svc-hero-card-page--2 { transition-delay: 180ms; }
      .svc-hero-rightcard.is-visible .svc-hero-card-page--1 {
        transform: translate(-18px, -10px) rotate(-3deg);
        opacity: 0.7;
      }
      .svc-hero-rightcard.is-visible .svc-hero-card-page--2 {
        transform: translate(-36px, -18px) rotate(-6deg);
        opacity: 0.42;
      }
      .svc-hero-card {
        padding: clamp(28px, 3vw, 40px);
        color: #ffffff;
        display: flex; flex-direction: column;
        gap: 14px;
      }
      .svc-hero-card-eyebrow {
        font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
        text-transform: uppercase; color: rgba(255,255,255,0.78);
      }
      .svc-hero-card-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
      .svc-hero-card-rows { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
      .svc-hero-card-rows li {
        display: flex; align-items: center; gap: 12px;
        font-size: 15px; color: rgba(255,255,255,0.92);
      }
      .svc-hero-card-rows strong { color: #ffffff; font-weight: 700; }
      .svc-hero-card-dot {
        width: 8px; height: 8px; border-radius: 50%; background: var(--svc-yellow);
        flex-shrink: 0;
      }
      .svc-hero-card-foot {
        margin-top: auto; font-size: 12px; color: rgba(255,255,255,0.62);
        letter-spacing: 0.04em;
      }
      @media (max-width: 920px) {
        .svc-hero-rightcard { max-width: 380px; margin: 0 auto; }
      }

      /* SECTION PRIMITIVES */
      .svc-container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
      .svc-section { padding: clamp(64px, 9vw, 112px) 0; }
      .svc-section-tinted { background: var(--svc-bg-tinted); }
      .svc-section-dark { background: var(--svc-ink); color: var(--svc-text-on-dark); }
      .svc-section-final {
        background: linear-gradient(180deg, #0B0B12 0%, #1A1A2E 100%);
      }
      .svc-eyebrow {
        font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
        text-transform: uppercase; color: var(--svc-blue);
      }
      .svc-eyebrow-on-dark { color: var(--svc-yellow); }
      .svc-h2 {
        font-size: clamp(28px, 3.4vw, 44px);
        line-height: 1.12;
        font-weight: 700; letter-spacing: -0.02em;
        margin: 14px 0 0; color: var(--svc-text);
      }
      .svc-h2-on-dark { color: var(--svc-text-on-dark); }
      .svc-section-sub {
        margin-top: 14px; font-size: 16px; line-height: 1.6;
        color: var(--svc-text-muted); max-width: 64ch;
      }
      .svc-section-sub-on-dark { color: var(--svc-text-on-dark-muted); }

      /* SCOPE GRID */
      .svc-scope-grid {
        display: grid; gap: 18px; margin-top: clamp(28px, 4vw, 48px);
        grid-template-columns: repeat(2, 1fr);
      }
      @media (max-width: 760px) { .svc-scope-grid { grid-template-columns: 1fr; } }
      .svc-scope-card {
        background: #ffffff; border: 1px solid var(--svc-border);
        border-radius: 14px; padding: clamp(22px, 2.6vw, 32px);
      }
      .svc-scope-title {
        margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
        color: var(--svc-text);
      }
      .svc-scope-detail {
        margin: 10px 0 0; font-size: 14.5px; line-height: 1.6;
        color: var(--svc-text-muted);
      }

      /* STACK CONTEXT RAIL */
      .svc-stack-rail {
        display: grid; gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        margin-top: clamp(28px, 4vw, 48px);
      }
      @media (max-width: 760px) { .svc-stack-rail { grid-template-columns: repeat(2, 1fr); } }
      .svc-stack-pill {
        padding: 18px 20px; border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.12);
        background: rgba(255,255,255,0.04);
        display: flex; flex-direction: column; gap: 8px;
      }
      .svc-stack-pill-active {
        background: rgba(35,104,239,0.22);
        border-color: rgba(35,104,239,0.55);
      }
      .svc-stack-pill-side { opacity: 0.78; }
      .svc-stack-pill-num {
        font-size: 12px; font-weight: 700; letter-spacing: 0.18em;
        text-transform: uppercase; color: var(--svc-yellow);
      }
      .svc-stack-pill-label {
        font-size: 17px; font-weight: 600; color: var(--svc-text-on-dark);
      }
      .svc-stack-pill-active .svc-stack-pill-num { color: var(--svc-yellow); }

      /* METHOD STEPS */
      .svc-steps {
        display: grid; gap: 18px; margin-top: clamp(28px, 4vw, 48px);
        grid-template-columns: repeat(4, 1fr);
      }
      @media (max-width: 920px) { .svc-steps { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 520px) { .svc-steps { grid-template-columns: 1fr; } }
      .svc-step {
        background: #ffffff; border: 1px solid var(--svc-border);
        border-radius: 14px; padding: clamp(20px, 2.4vw, 28px);
      }
      .svc-step-num {
        font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
        color: var(--svc-blue);
      }
      .svc-step-title {
        margin: 12px 0 8px; font-size: 17px; font-weight: 700;
        letter-spacing: -0.01em; color: var(--svc-text);
      }
      .svc-step-detail {
        margin: 0; font-size: 14px; line-height: 1.6;
        color: var(--svc-text-muted);
      }

      /* PERSONA SECTION (port of PersonaCard3)
         All content (eyebrow + h2 + sub + body + CTA) lives in the
         left panel, NOT a separate header row above the grid. That
         keeps the column heights balanced so align-items: center
         doesn't produce a giant whitespace gap between the heading
         and the body when the right-column persona card is tall. */
      .svc-pcsec { padding: clamp(72px, 9vw, 120px) 24px; }
      .svc-pcsec-inner { max-width: 1320px; margin: 0 auto; position: relative; }
      .svc-pcsec-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: 64px;
        align-items: center;
      }
      .svc-pcsec-panel { padding: 0 clamp(8px, 3vw, 48px) 0 0; position: relative; z-index: 1; }
      .svc-pcsec-panel .svc-eyebrow { margin-bottom: 14px; }
      .svc-pcsec-panel .svc-h2 { margin-top: 0; }
      .svc-pcsec-panel .svc-section-sub { margin-top: 16px; }
      .svc-pcsec-body { margin-top: 24px; }
      .svc-pcsec-body p {
        margin: 0 0 16px; font-size: 16px; line-height: 1.65;
        color: var(--svc-text);
      }
      .svc-pcsec-body p:last-of-type { margin-bottom: 0; }
      .svc-pcsec-ctas { margin-top: 28px; display: flex; gap: 12px; }
      .svc-pcsec-image {
        position: relative; width: 100%; max-width: 600px;
        margin-left: auto; z-index: 2;
      }
      .svc-pcsec-canvas {
        position: relative;
        aspect-ratio: 1212 / 1535;
        background: #2368EF;
        border-radius: 22px;
        overflow: visible;
      }
      .svc-pcsec-portrait {
        position: absolute;
        left: 60%; bottom: 0;
        transform: translateX(-50%);
        height: 90%; width: auto;
        object-fit: contain; object-position: center bottom;
        pointer-events: none; user-select: none; z-index: 1;
      }
      .svc-pcsec-labels {
        position: relative;
        margin: -68px 0 0;
        padding: 22px 36px;
        background: rgba(0, 18, 55, 0.178);
        backdrop-filter: blur(55px) saturate(180%);
        -webkit-backdrop-filter: blur(55px) saturate(180%);
        border-radius: 15px;
        box-shadow:
          0 12px 28px rgba(8, 12, 36, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.24);
        display: flex; flex-wrap: wrap; gap: 14px 28px;
        z-index: 3;
      }
      .svc-pcsec-chip {
        display: inline-flex; align-items: center; gap: 10px;
        padding: 2px 0;
        font-size: 14px; font-weight: 500;
        color: #ffffff; letter-spacing: -0.005em; line-height: 1.3;
        white-space: nowrap;
      }
      .svc-pcsec-dot {
        flex-shrink: 0; width: 9px; height: 9px;
        border-radius: 50%; background: var(--svc-yellow);
      }
      @media (max-width: 900px) {
        .svc-pcsec { padding: 72px 20px; }
        .svc-pcsec-grid { grid-template-columns: 1fr; gap: 36px; }
        .svc-pcsec-panel { padding: 0; order: 2; }
        .svc-pcsec-image { order: 1; margin: 0 auto; max-width: 460px; }
        .svc-pcsec-chip { white-space: normal; }
      }
      @media (max-width: 480px) {
        .svc-pcsec-labels { padding: 12px 14px; }
        .svc-pcsec-chip { font-size: 11px; }
      }

      /* FAQ */
      .svc-faq { max-width: 760px; margin-top: 18px; }
      .svc-faq-item {
        border-bottom: 1px solid var(--svc-border);
      }
      .svc-faq-item:first-child { border-top: 1px solid var(--svc-border); }
      .svc-faq-q {
        list-style: none; cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        gap: 20px;
        padding: 20px 0; font-size: 16px; font-weight: 600;
        color: var(--svc-text);
      }
      .svc-faq-q::-webkit-details-marker { display: none; }
      .svc-faq-icon {
        width: 28px; height: 28px; flex-shrink: 0;
        border-radius: 50%; background: #eef2f6; color: var(--svc-text);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 18px; line-height: 1;
        transition: transform 0.2s ease, background 0.2s ease;
      }
      .svc-faq-item[open] .svc-faq-icon { transform: rotate(45deg); background: var(--svc-blue); color: #ffffff; }
      .svc-faq-a {
        margin: 0 0 22px; font-size: 14.5px; line-height: 1.65;
        color: var(--svc-text-muted); max-width: 64ch;
      }

      /* FINAL CTA */
      .svc-final { display: flex; flex-direction: column; align-items: center; text-align: center; }
      .svc-final .svc-eyebrow,
      .svc-final .svc-h2,
      .svc-final .svc-section-sub { text-align: center; }
      .svc-final .svc-section-sub { margin-left: auto; margin-right: auto; }
      .svc-final-ctas {
        margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px 22px;
        align-items: center; justify-content: center;
      }
      /* Canonical above-footer textlink secondary. White text with
         a faint underline + arrow at end. Hover lightens both the
         text and the underline over 300ms; arrow nudges 3px right. */
      .svc-final-link {
        display: inline-flex; align-items: center; gap: 8px;
        color: rgba(255, 255, 255, 0.72);
        font-size: 16px; font-weight: 500;
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0.28);
        text-decoration-thickness: 1px;
        text-underline-offset: 6px;
        transition: color 300ms ease, text-decoration-color 300ms ease;
      }
      .svc-final-link::after {
        content: "→";
        display: inline-block;
        font-size: 1.05em; line-height: 1;
        transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .svc-final-link:hover {
        color: rgba(255, 255, 255, 0.96);
        text-decoration-color: rgba(255, 255, 255, 0.55);
      }
      .svc-final-link:hover::after { transform: translateX(3px); }

/* ─── components/v3/NotFoundContent.tsx — 404 page additions ───── */
.svc-404-grid { align-items: center; }
        .svc-404-mark {
          display: flex; align-items: center; justify-content: center;
        }
        .svc-404-digits {
          font-size: clamp(180px, 24vw, 360px);
          line-height: 0.9;
          font-weight: 800;
          letter-spacing: -0.05em;
          color: rgba(255, 255, 255, 0.06);
          text-shadow: 0 0 0 transparent;
          user-select: none;
          background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 100%);
          -webkit-background-clip: text;
          background-clip: text;
          color: transparent;
        }
        @media (max-width: 920px) {
          .svc-404-mark { display: none; }
        }
        .svc-404-cards {
          display: grid; gap: 18px;
          grid-template-columns: repeat(3, 1fr);
          margin-top: clamp(28px, 4vw, 48px);
        }
        @media (max-width: 920px) { .svc-404-cards { grid-template-columns: 1fr; } }
        .svc-404-card {
          background: #ffffff; border: 1px solid var(--svc-border);
          border-radius: 14px; padding: clamp(24px, 2.8vw, 32px);
          display: flex; flex-direction: column; gap: 14px;
        }
        .svc-404-card-eyebrow {
          font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
          text-transform: uppercase; color: var(--svc-text-muted);
        }
        .svc-404-card-title {
          margin: 0; font-size: 19px; font-weight: 700;
          letter-spacing: -0.01em; color: var(--svc-text);
        }
        .svc-404-card-detail {
          margin: 0; font-size: 14.5px; line-height: 1.6;
          color: var(--svc-text-muted);
        }
        .svc-404-card-cta {
          margin-top: auto;
          align-self: flex-start;
          font-size: 14px; font-weight: 600;
          color: var(--svc-blue); text-decoration: none;
          padding: 6px 0;
          border-bottom: 1px solid transparent;
          transition: border-color 0.15s ease;
        }
        .svc-404-card-cta:hover { border-bottom-color: var(--svc-blue); }