/* Homepage additions from Figma "AI security hub" (frame 2762:25040):
   the "For builders" pill over the three moves and the "For security teams /
   The YES Standard" block. Guide and Scorecard are intentionally absent. */
.home-section-pill { display: table; margin: 0 auto; padding: 0.625rem 1rem; background: #f6ded8; border: 0.0625rem solid #000; border-radius: 6.25rem; font: 500 1.125rem/1.25rem 'Poppins', sans-serif; text-transform: uppercase; color: #000; position: relative; z-index: 3; }
.home-section-pill-builders { margin-bottom: 0.75rem; }
.home-standard { position: relative; z-index: 2; width: min(76.25rem, calc(100% - 6rem)); margin: 5.5rem auto 0; display: flex; flex-direction: column; gap: 2.5rem; isolation: isolate; }
.home-standard::after { content: ''; position: absolute; z-index: -1; top: -1.5rem; bottom: -1.5rem; left: -100vw; right: -100vw; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--tint, #fdf2d4) 5rem, var(--tint, #fdf2d4) calc(100% - 5rem), transparent); }
.home-section-head { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.home-standard .standard-title { margin: 0; font-family: 'Unbounded', 'Poppins', sans-serif; font-weight: 600; font-size: 2.875rem; line-height: 1.24; }
.standard-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 10.625rem; padding: 1.625rem 2.5rem 1.625rem 1.625rem; background: #ecf8f5; border: 0.0625rem solid #000; border-radius: 0.75rem; box-shadow: 0.25rem 0.25rem 0 #000; }
.standard-text { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.5rem; max-width: 45.4375rem; }
.standard-card-head { display: flex; align-items: center; gap: 0.75rem; }
.standard-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 0.316rem; background: #dcf4de; }
.standard-icon img { width: 1.75rem; height: 1.75rem; display: block; }
.standard-card-title { margin: 0; display: flex; align-items: center; gap: 0.75rem; font: 700 1.5rem/1 'Poppins', sans-serif; color: #000; }
.standard-tag { display: inline-block; padding: 0.5rem 1rem; background: #9ee283; border: 0.039rem solid #000; box-shadow: 0.1875rem 0.1875rem 0 #000; font: 600 1.5rem/1.25 'Unbounded', 'Poppins', sans-serif; color: #000; transform: rotate(-2deg); }
.standard-card-body { margin: 0; max-width: 37.6875rem; font: 400 1rem/1.26875rem 'Poppins', sans-serif; color: #111013; }
.standard-cta { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; padding: 1rem 1.5rem; background: #f8f872; border: 0.0625rem solid #000; border-radius: 6.25rem; font: 600 1.125rem/1.25rem 'Poppins', sans-serif; text-transform: uppercase; color: #000; text-decoration: none; white-space: nowrap; }
.standard-cta:hover { background: #fefa98; }
.standard-cta:focus-visible { outline: 0.125rem solid #000; outline-offset: 0.1875rem; }
.standard-path { position: absolute; left: 50%; top: 0; width: 38.125rem; height: 10.625rem; max-width: none; pointer-events: none; }
.standard-star { position: absolute; pointer-events: none; max-width: none; }
.standard-star-a { left: calc(50% + 20.8rem); top: 7.3rem; }
.standard-star-b { left: calc(50% + 23rem); top: 8.8rem; }
@media (max-width: 900px) {
  .home-standard { width: calc(100% - 2rem); margin-top: 3.5rem; }
  .home-standard .standard-title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .standard-card { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
  .standard-path, .standard-star { display: none; }
  .home-section-pill { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) { .standard-tag { transform: none; } }

/* Rocket on the dashed route (home-standard.js): it rises out of the card's
   bottom edge, flies the line with the Hardening tool's wake (three small
   puffs streaming back from the flame, hardening.css .hd-rocket-wake), is
   swallowed by the top edge and comes round again. Without JS, or with
   reduced motion, it rests where Figma draws it. */
.standard-path { overflow: visible; }
.standard-route { animation: standard-route-flow 1s linear infinite; }
@keyframes standard-route-flow { to { stroke-dashoffset: -14; } }
.standard-wake circle { fill: #ffff78; stroke: #111; stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.standard-path.is-flying .standard-wake circle { animation: standard-wake 1s ease-out infinite; }
.standard-path.is-flying .standard-wake circle:nth-child(1) { animation-delay: -.15s; }
.standard-path.is-flying .standard-wake circle:nth-child(2) { animation-delay: -.5s; }
.standard-path.is-flying .standard-wake circle:nth-child(3) { animation-delay: -.78s; }
@keyframes standard-wake { 0% { opacity: 0; transform: translate(3px, 0) scale(.4); } 35% { opacity: .8; } 100% { opacity: 0; transform: translate(-27px, 4px) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .standard-route, .standard-wake circle { animation: none !important; } }