/* Google-color frames for explicit public content-card families.
   Linked after the page styles. No dimensions, backgrounds, text or pseudo-
   elements change. Only the outer card receives a frame when families nest;
   form shells and application/nodegraph surfaces are excluded. */

/* These namespaced custom properties alone never paint nested cards. */
body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
) {
  --gcp-neon-rgb: 66 133 244;
  --gcp-neon-edge: .60;
  --gcp-neon-inset: .13;
  --gcp-neon-glow: .12;
}
body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):nth-child(4n + 2) { --gcp-neon-rgb: 52 168 83; }
body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):nth-child(4n + 3) { --gcp-neon-rgb: 251 188 5; }
body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):nth-child(4n) { --gcp-neon-rgb: 234 67 53; }

/* Inward outlines and shadows do not affect layout. Specific exclusions also
   outrank the legacy family hover shadows, so touch keeps this baseline. */
body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):not(:is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
) *):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app])):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app]) *):not(:has(form)) {
  outline: 1px solid rgb(var(--gcp-neon-rgb) / var(--gcp-neon-edge));
  outline-offset: -1px;
  box-shadow:
    inset 0 0 0 1px rgb(var(--gcp-neon-rgb) / var(--gcp-neon-inset)),
    0 0 15px -3px rgb(var(--gcp-neon-rgb) / var(--gcp-neon-glow));
  transition: none;
}

/* Disable previous card hover lifts; native scroll-positioned visuals retain
   their non-hover transforms. This adds no animation or pointer interception. */
body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):not(:is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
) *):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app])):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app]) *):not(:has(form)):is(:hover, :focus-within) { transform: none; }

@media (hover: hover) and (pointer: fine) {
  body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):where(a[href], button, summary, [tabindex]:not([tabindex="-1"]), :has(a[href], button, summary)):hover {
    --gcp-neon-edge: .90;
    --gcp-neon-inset: .22;
    --gcp-neon-glow: .25;
  }
}

/* Only visible keyboard focus enhances focus-within; a tap does not latch a
   brighter frame. Existing focus rings on links/buttons inside cards remain. */
body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):where(a[href], button, summary, [tabindex]:not([tabindex="-1"]), :has(a[href], button, summary)):focus-within:has(:focus-visible),
body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):where(a[href], button, summary, [tabindex]:not([tabindex="-1"]), :has(a[href], button, summary)):focus-visible {
  --gcp-neon-edge: .95;
  --gcp-neon-inset: .24;
  --gcp-neon-glow: .25;
}
body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):not(:is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
) *):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app])):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app]) *):not(:has(form)):focus-visible {
  outline-width: 2px;
  outline-offset: 3px;
}

@media (forced-colors: active) {
  body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):not(:is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
) *):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app])):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app]) *):not(:has(form)) {
    outline-color: CanvasText;
    box-shadow: none;
  }
  body main :is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
):not(:is(
  .card, .bp-card, .hero-card, .highlight-panel,
  .callout-card, .achievement-card, .topic-card, .category-card,
  .case-study-card, .offer-card, .cta-card, .cta-panel,
  .framework-card, .placement-card, .control-card,
  .deliverable-card, .route-card, .layer-card, .platform-card,
  .vendor-card, .pilot-card, .pricing-card, .summary-card,
  .outcome-card, .ai-discovery-card, .home-pulse-card, .cloud-pulse-card,
  .post-author-card, .why-card, .value-card, .success-card,
  .review-cta, .dna-bubble, .homepage-bottom-cta, .bp-entry-grid > article,
  .home-conclusion__grid > article, .sentiment-card, .macro-card, .cot-card,
  .blog-post
) *):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app])):not(:is(form, fieldset, [role="dialog"], [role="menu"], .react-flow, .nodegraph, .node-graph, [data-nodegraph], [data-agentops-app]) *):not(:has(form)):focus-visible { outline-color: Highlight; }
}