/* VertoDigital — Brand styles (shared across all pages) */

/* Offset anchor jumps so content isn't hidden behind the sticky navbar */
      html { scroll-padding-top: 96px; }
      /* Brand type system
         - Geist Regular (400) for body
         - Geist Medium (500) for headings + emphasis
         - Geist Mono for data / numbers
         - Caveat (stand-in for DK Keswick) for sparing accent use only */
      body {
        font-family: 'Geist', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-weight: 400;
        font-size: 16px;    /* body spec: 14–16px; 16px default */
        line-height: 1.5;   /* brand rule: 1.5 body */
        background-color: #ffffff;
        color: #060026;
        font-feature-settings: "ss01", "cv11";
      }
      h1, h2, h3, h4, h5, h6 {
        font-family: 'Geist', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        font-weight: 500;   /* Medium only */
        line-height: 1.2;   /* brand rule: 1.2 headings */
        letter-spacing: -0.015em;
      }
      /* Script accent — placeholder for DK Keswick */
      .font-script { font-family: 'Caveat', cursive; font-weight: 400; }
      /* Max line-length readability — 70–80ch per brand rule */
      .prose-readable { max-width: 72ch; }
      /* Mono numerals — tabular for alignment in dashboards/benchmarks */
      .font-mono, .tabular-nums { font-variant-numeric: tabular-nums; }
      /* Hero gradient: Light Blue → White (per brand spec) */
      .hero-gradient {
        /* Brand gradient: Light Main Blue (#66CCFF) → White — per palette Gradients spec */
        background:
          radial-gradient(ellipse 70% 50% at 20% 10%, rgba(102, 204, 255, 0.45), transparent 60%),
          radial-gradient(ellipse 60% 50% at 90% 50%, rgba(67, 229, 255, 0.2), transparent 60%),
          linear-gradient(180deg, #d9f0ff 0%, #ffffff 70%);
      }
      /* Hero/display stat numerals — tight tracking, medium weight */
      .hero-stat { font-family: 'Geist', sans-serif; font-weight: 500; line-height: 0.85; letter-spacing: -0.04em; }
      /* Legacy drop-cap removed — Geist doesn't work as drop cap; we use a Caveat monogram instead */
      /* Light Blue panel (the v3 signature) */
      .panel-light-blue { background-color: #66CCFF; }
      /* Dark Blue panel */
      .panel-dark-blue { background-color: #060026; }  /* Deep Navy — dark backgrounds */

      /* ---------------------------------------------------------------
         Brand Layout Grid
         - 12-column responsive grid
         - 1140–1200px content width (effective; wrapper caps at 1440px)
         - 24px column gutters (applied on grids via gap-6)
         - Outer margins: 24px mobile → 80px tablet → 120px desktop
         --------------------------------------------------------------- */
      .container-brand {
        width: 100%;
        max-width: 1440px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
      }
      @media (min-width: 768px) {
        .container-brand { padding-left: 80px; padding-right: 80px; }
      }
      @media (min-width: 1280px) {
        .container-brand { padding-left: 120px; padding-right: 120px; }
      }
      /* Marquee */
      @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }
      .marquee-track { animation: marquee 45s linear infinite; will-change: transform; display: flex; align-items: center; gap: 96px; width: max-content; touch-action: pan-y; }
      .marquee-track:hover { animation-play-state: paused; }
      .marquee-logo { height: 28px; width: auto; flex-shrink: 0; opacity: 0.55; transition: opacity 180ms; display: block; }
      .marquee-logo:hover { opacity: 0.9; }
      @media (max-width: 767px) {
        .marquee-track { animation-duration: 30s; gap: 60px; }
        .marquee-logo { height: 22px; }
      }
      /* Soft fade at both edges so logos don't hard-clip */
      .marquee-wrap {
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      }
      /* Before/after bar chart bars */
      .bar { transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
      /* Hamburger ↔ X morph (driven by aria-expanded on the parent button) */
      .menu-icon-stack {
        position: relative;
        width: 22px;
        height: 22px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }
      .hamburger-icon {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
      }
      .hamburger-line {
        display: block;
        height: 2px;
        width: 100%;
        background-color: currentColor;
        border-radius: 2px;
        transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
        transform-origin: center;
      }
      [aria-expanded="true"] .hamburger-line:first-child {
        transform: translateY(7px) rotate(45deg);
      }
      [aria-expanded="true"] .hamburger-line:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
      }
      [aria-expanded="true"] .hamburger-line:last-child {
        transform: translateY(-7px) rotate(-45deg);
      }
      /* Book a call button */
      .gcal-btn-link {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px 24px;
        border-radius: 12px;
        font-size: 15px;
        font-weight: 500;
        font-family: 'Geist', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        letter-spacing: -0.01em;
        color: #060026;
        background-color: #E1F77E;
        text-decoration: none;
        cursor: pointer;
        transition: background-color 150ms ease;
      }
      .gcal-btn-link:hover { background-color: #d4eb6e; }
      .gcal-btn-link::before {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23060026' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C%2Fsvg%3E");
        background-repeat: no-repeat;
        background-size: contain;
      }
      .gcal-btn-link::after { content: "Let\2019s Talk"; }

      /* Nav CTA — lime background fade */
      .nav-cta {
        transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
      }
      .nav-cta:hover {
        background-color: #cde86a;
      }
      /* Shared Stripe-style arrow animation for all primary CTAs */
      .cta-btn .nav-cta-arrow {
        transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
      }
      .cta-btn:hover .nav-cta-arrow {
        transform: translateX(4px);
      }
      .cta-btn .nav-cta-arrow .arrow-stem {
        stroke-dasharray: 14;
        stroke-dashoffset: 14;
        transition: stroke-dashoffset 200ms cubic-bezier(0.22, 1, 0.36, 1);
      }
      .cta-btn:hover .nav-cta-arrow .arrow-stem {
        stroke-dashoffset: 0;
      }
      /* Send message button — 15% lighter dark hover */
      .send-msg-btn { transition: background-color 200ms ease; }
      .send-msg-btn:hover { background-color: #1E1B50; }
      /* Footer */

/* ── Page-specific additions ── */
      .section-eyebrow { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(6, 0, 38, 0.55); font-weight: 500; }
      .dollar-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; line-height: 1; color: #0099FF; opacity: 0; transform: scale(0.6); transition: opacity 200ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1); }
      @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
      .cta-btn .nav-cta-arrow { transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
      .chev { transition: transform 200ms ease; }
      .mega-num {
        font-family: 'Geist Mono', ui-monospace, monospace;
        font-weight: 500;
        font-size: clamp(56px, 8vw, 96px);
        line-height: 1;
        letter-spacing: -0.04em;
        font-variant-numeric: tabular-nums;
        display: inline-flex;
        align-items: flex-start;
      }
      .stat-cell::before {
        content: "";
        position: absolute;
        left: 0; top: 0;
        width: 32px; height: 2px;
        background: #43E5FF;
      }
      .agent-card {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 14px;
        padding: 22px;
        transition: background 200ms ease, transform 200ms ease;
      }
      .dot-pulse { animation: dot-pulse 2.4s ease-in-out infinite; }
      .menu-icon-stack { position: relative; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
      .chip { display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px; padding: 8px 16px; font-size: 13px; font-weight: 500; color: rgba(6, 0, 38, 0.7); background-color: rgba(217, 240, 255, 0.5); transition: background-color 150ms ease, color 150ms ease; white-space: nowrap; }
      .no-scrollbar::-webkit-scrollbar { display: none; }
      @media (min-width: 1024px) { #paul-mobile-cta { display: none !important; } }
      .legal-prose p { margin-bottom: 1rem; }
      .legal-prose p:last-child { margin-bottom: 0; }
      .legal-prose ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }

      /* Jobs page — extracted from inline style block */
      .section-eyebrow-blue { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #0099FF; font-weight: 500; }
      .editorial-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(6, 0, 38, 0.15), transparent); }
      .stat-cell { position: relative; padding-top: 20px; }
      .stat-num-label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; }
      .pull-quote { font-family: 'Caveat', cursive; font-weight: 400; font-size: clamp(32px, 5vw, 56px); line-height: 1.12; letter-spacing: -0.01em; }
      .mock-tile { background: #ffffff; border-radius: 16px; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease; }
      .mock-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -12px rgba(0, 153, 255, 0.18); }
      .mock-bar { height: 6px; background: rgba(6, 0, 38, 0.07); border-radius: 3px; overflow: hidden; }
      .mock-bar-fill { height: 100%; border-radius: 3px; }
      .avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; color: white; font-weight: 500; font-family: 'Geist', sans-serif; letter-spacing: -0.01em; flex-shrink: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6); }
      .mega-num .unit { font-size: 0.36em; font-weight: 400; opacity: 0.7; margin-left: 4px; margin-top: 0.18em; letter-spacing: -0.02em; }
      .agent-card:hover { background: linear-gradient(135deg, rgba(67, 229, 255, 0.1), rgba(139, 87, 244, 0.06)); transform: translateY(-2px); }
      .agent-prompt { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #43E5FF; opacity: 0.75; }
      /* Avatar gradient fills (CSP-safe — no inline styles) */
      .avatar-grad-1 { background: linear-gradient(135deg, #8B57F4, #0099FF); }
      .avatar-grad-2 { background: linear-gradient(135deg, #0099FF, #43E5FF); }
      .avatar-grad-3 { background: linear-gradient(135deg, #43E5FF, #0099FF); }
      .avatar-grad-4 { background: linear-gradient(135deg, #8B57F4, #43E5FF); }
      .avatar-grad-5 { background: linear-gradient(135deg, #0066CC, #66CCFF); }
      /* Jobs "by the numbers" mega stat sizing */
      .jobs-stat-num { font-size: 56px; line-height: 1; }
      /* Mock-tile funnel bar widths */
      .mock-bar-fill.w-96 { width: 96%; }
      .mock-bar-fill.w-62 { width: 62%; }
      .mock-bar-fill.w-38 { width: 38%; }
      .mock-bar-fill.w-14 { width: 14%; }
      /* Partner logo strip — uniform sizing */
      .partner-logo { width: auto; object-fit: contain; opacity: 0.45; filter: grayscale(1); }
      .partner-logo-20 { height: 20px; }
      .partner-logo-15 { height: 15px; }