/* Brand layer (2026-11-01): the header logo with its hover motion, logo tiles, and shared spacing rules.
   Loaded on every page after site.css. */

/* Header logo: the ring turns once and the bird hops on hover or keyboard focus */
.logo { display: block; }
.logo .brand-logo { display: block; width: 100%; height: 100%; overflow: visible; }
.brand-ring { transform-box: view-box; transform-origin: 33px 29px; transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.brand-bird { transform-box: view-box; transform-origin: 40px 54px; }
.logo:hover .brand-ring, .logo:focus-visible .brand-ring { transform: rotate(360deg); }
.logo:hover .brand-bird, .logo:focus-visible .brand-bird { animation: brand-hop .75s cubic-bezier(.3, .7, .3, 1); }
.logo:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; border-radius: 6px; }
@keyframes brand-hop {
  0% { transform: none; }
  30% { transform: translateY(-3px) rotate(-8deg); }
  60% { transform: translateY(0) rotate(3deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-ring { transition: none; }
  .logo:hover .brand-ring, .logo:focus-visible .brand-ring { transform: none; }
  .logo:hover .brand-bird, .logo:focus-visible .brand-bird { animation: none; }
}

/* Integration logo tiles */
.v4-logos li { color: var(--ink); }
.v4-logos li.v4-logo-dark { background: var(--charcoal); border-color: var(--charcoal); }
.v4-logos li.v4-logo-icon { gap: .12rem; }
.v4-logos li.v4-logo-icon img, .v4-logos li.v4-logo-icon svg { width: .36rem; height: .36rem; max-height: none; flex: none; }
.v4-logos li.v4-logo-icon span { font: .16rem/1.15 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v4-logos li.v4-logo-generic svg { color: var(--text); }
@media (max-width: 1024px) {
  .v4-logos li.v4-logo-icon { gap: .08rem; }
  .v4-logos li.v4-logo-icon img, .v4-logos li.v4-logo-icon svg { width: .24rem; height: .24rem; }
  .v4-logos li.v4-logo-icon span { font-size: .12rem; }
}

/* Shared rhythm: text blocks never run wider than a comfortable line */
.v2-sub { max-width: 7.40rem; }
.v2-body { max-width: 5.20rem; }
@media (max-width: 1024px) { .v2-sub, .v2-body { max-width: none; } }
.v5-dur { font-family: "MD Regular", "Helvetica Neue", Arial, sans-serif; opacity: .7; margin-left: .04rem; }

/* ---------- v6 fixes after the final review (2026-11-01) ---------- */
/* Header CTA for phones and tablets; desktop keeps the nav */
.v6-head-cta { display: none; }
@media (max-width: 1024px) {
  .logo { left: .24rem; top: calc((var(--header) - .52rem) / 2); width: 1.50rem; height: .52rem; }
  .v6-head-cta { display: inline-flex; align-items: center; position: absolute; right: .24rem; top: 50%; transform: translateY(-50%);
    height: .36rem; padding: 0 .16rem; border-radius: .40rem; background: var(--yellow); border: 1px solid var(--charcoal); color: var(--charcoal);
    font: .12rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; text-decoration: none; }
}
/* Headings break in balanced lines, never a lone word */
.v2-h2, .contact-title, .v5-h3, .hero-title, .v2-sub, .v5-body, .v5-pilot-sub { text-wrap: balance; }
.v2-includes li, .v5-goal { text-wrap: pretty; }
/* The form heading uses the same style as every other section heading */
.v2-contact .contact-title { font: .52rem/1.08 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; color: var(--ink); }
@media (max-width: 1024px) { .v2-contact .contact-title { font-size: .30rem; } }
/* Invalid dropdowns get the red border too */
.field.invalid select:not(#f-country) { border-color: #df3131; }
/* Alarm: the alert holds steady while the sound waves pulse */
.v4-alarm-alert { animation-name: v6-alarm; }
@keyframes v6-alarm { 0%, 40% { opacity: 0; } 43%, 55% { opacity: 1; } 58% { opacity: .35; } 61%, 73% { opacity: 1; } 76% { opacity: .35; } 79%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v4-alarm-alert { animation: none; } }
/* Hero buttons fit small phones */
@media (max-width: 480px) {
  .v4-hero .btn-hero { max-width: 100%; font-size: .15rem; gap: .10rem; padding: 0 .16rem; }
}
/* Footer sits on the same gutter as the content */
.footer-links { left: 1.12rem; }
.footer-mark { left: calc(14.40rem - 1.12rem - .637rem); }
@media (max-width: 1024px) { .footer-links { left: .24rem; } .footer-mark { left: auto; right: .24rem; } }
/* Step 04: the three dashboard views stack full width */
.v5-data { grid-template-columns: 1fr; }
.v5-data img { max-width: 100%; }
.v5-dash { display: block; }
.v5-dash img { display: block; width: 100%; height: auto; border-radius: .20rem; box-shadow: 0 .14rem .44rem rgba(37, 37, 37, .10); }
@media (max-width: 1024px) { .v5-dash img { border-radius: .12rem; } }

/* Legal pages and 404: one readable column on the content grid */
.legal { max-width: 7.40rem; margin: 0 auto; padding: .80rem .40rem 1.20rem; font: .17rem/1.65 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }
.legal-title { font: .48rem/1.1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; color: var(--ink); margin-bottom: .32rem; }
.legal p, .legal li { max-width: none; }
.legal a { color: var(--ink); text-decoration: underline; overflow-wrap: anywhere; }
.v6-404 { padding: 1.40rem 1.12rem 1.60rem; }
.v6-404 h1 { font: 2.40rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.04em; color: var(--ink); }
.v6-404-text { margin: .16rem 0 .40rem; font: .26rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }
@media (max-width: 1024px) {
  .legal { padding: .40rem .24rem .64rem; font-size: .15rem; }
  .legal-title { font-size: .30rem; }
  .v6-404 { padding: .64rem .24rem .80rem; } .v6-404 h1 { font-size: 1.40rem; } .v6-404-text { font-size: .18rem; }
}
/* the form fills its column, so it ends on the same right edge as every section */
.v2-contact .form { max-width: none; }

/* ---------- v6 hero (YC pass): what it is and who it is for, one button, the real product ---------- */
.v6-hero { display: grid; grid-template-columns: 6.10rem 1fr; gap: .72rem; align-items: center; background: var(--charcoal); padding: .80rem 1.12rem .96rem; }
.v6-eyebrow { font: .15rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .18em; color: var(--yellow); }
.v6-hero h1 { margin-top: .22rem; font: .54rem/1.12 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.v6-lead { margin-top: .24rem; font: .22rem/1.5 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .82); max-width: 5.20rem; text-wrap: balance; }
.v6-actions { display: flex; align-items: center; gap: .32rem; margin-top: .40rem; flex-wrap: wrap; }
.v6-watch { display: inline-flex; align-items: center; gap: .12rem; font: .18rem/1 "MD Medium", "Helvetica Neue", Arial, sans-serif; color: #fff; text-decoration: none; }
.v6-watch:hover { text-decoration: underline; text-underline-offset: 4px; }
.v6-play { width: .36rem; height: .36rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .5); position: relative; flex: none; }
.v6-play::after { content: ""; position: absolute; left: 52%; top: 50%; transform: translate(-40%, -50%); border-left: .11rem solid #fff; border-top: .07rem solid transparent; border-bottom: .07rem solid transparent; }
.v6-hero .v4-proof { margin-top: .32rem; }
.v6-hero-media { margin: 0; }
.v6-hero-media img { display: block; width: 100%; height: auto; border-radius: .24rem; box-shadow: 0 .30rem .80rem rgba(0, 0, 0, .45); }
.v2-film { padding-top: .40rem; }
@media (max-width: 1024px) {
  .v6-hero { grid-template-columns: 1fr; gap: .28rem; padding: .36rem .24rem .40rem; }
  .v6-eyebrow { font-size: .11rem; }
  .v6-hero h1 { font-size: .32rem; margin-top: .14rem; }
  .v6-lead { font-size: .16rem; margin-top: .14rem; max-width: none; }
  .v6-actions { gap: .20rem; margin-top: .22rem; }
  .v6-watch { font-size: .15rem; } .v6-play { width: .30rem; height: .30rem; }
  .v6-hero-media img { border-radius: .14rem; }
  .v2-film { padding-top: .16rem; }
}
.legal h2 { margin: .48rem 0 .14rem; font: .28rem/1.25 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.legal h3 { margin: .28rem 0 .08rem; font: .19rem/1.35 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
@media (max-width: 1024px) { .legal h2 { font-size: .22rem; margin-top: .32rem; } .legal h3 { font-size: .17rem; } }
.v6-404 { min-height: calc(100vh - var(--header) - 2.32rem); }
@media (max-width: 1024px) { .v6-404 { min-height: calc(100vh - var(--header) - 1.333rem); } }

/* ---------- v7: type scale, spacing rhythm, form, phone sizes (third review pass) ---------- */
.v2-h2, .v2-contact .contact-title { font-size: .44rem; line-height: 1.1; }
.v5-how, .v2-install, .v2-contact { padding-top: 1.20rem; padding-bottom: 1.20rem; }
.v2-list li { font-size: .20rem; }
.v2-includes li { font-size: .19rem; }
/* one typeface family in the form, styled dropdowns */
.v2-contact .form, .v2-contact .form input, .v2-contact .form select, .v2-contact .form textarea,
.v2-contact .form legend, .v2-contact .form label, .v2-contact .form .submit, .v2-contact .v2-seg span { font-family: "MD Regular", sans-serif; }
.v2-contact .form legend, .v2-contact .form .v2-select label, .v2-contact .form .submit { font-family: "MD SemiBold", sans-serif; }
.field select:not(#f-country) { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 7.5l5 5 5-5' fill='none' stroke='%23252525' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; }
@media (max-width: 1024px) {
  .v2-h2, .v2-contact .contact-title { font-size: .28rem; }
  .v5-how, .v2-install, .v2-contact { padding-top: .56rem; padding-bottom: .56rem; }
  .v5-body, .v6-lead { font-size: .165rem; }
  .v4-specs dd { font-size: .145rem; } .v4-specs dt { font-size: .16rem; }
  .v2-list li { font-size: .165rem; } .v2-includes li { font-size: .16rem; }
}
.field.invalid textarea { border-color: #df3131; }

/* ---------- v8: third review fixes ---------- */
.legal-terms .legal, .legal-privacy .legal { margin: 0 auto; padding: .80rem .40rem 1.20rem; max-width: 7.40rem; }
.v2-contact .form select, .v2-contact .form select option { font-family: "MD Regular", sans-serif; }
@media (max-width: 1024px) {
  .legal-terms .legal, .legal-privacy .legal { padding: .40rem .24rem .64rem; }
  .legal { font-size: .163rem; }
  .v6-hero .v4-proof { font-size: .145rem; }
  .v5-goal { font-size: .165rem; }
  .v5-rule-quote { font-size: .16rem; } .v5-rule-line { font-size: .15rem; } .v5-rule-line b { font-size: .12rem; }
  .v4-alarm figcaption { font-size: .155rem; height: .26rem; }
}

/* ---------- v9: design polish (studio review, 2026-11-01) ---------- */
:root { --media-radius: .20rem; --media-shadow: 0 .16rem .48rem rgba(37, 37, 37, .08); }
@media (min-width: 1025px) { :root { --header: .80rem; } }
@media (max-width: 1024px) { :root { --media-radius: .14rem; } }

/* Header on the content grid, same charcoal as the hero */
.site-header { background: var(--charcoal); }
@media (min-width: 1025px) {
  .logo { left: 1.12rem; top: 50%; transform: translateY(-50%); width: 1.60rem; height: .55rem; }
  .nav { right: 1.12rem; top: 50%; transform: translateY(-50%); height: auto; min-width: 0; }
  .nav-list { align-items: center; gap: .08rem; }
  .nav-item > a { height: auto; padding: .10rem .14rem; font: .16rem/1 "MD Medium", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .78); text-shadow: none; }
  .nav-item > a:hover { color: #fff; }
  .nav-item:last-child > a { margin-left: .10rem; padding: .13rem .22rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: "MD SemiBold", "Helvetica Neue", Arial, sans-serif; }
  .nav-item:last-child > a:hover { color: var(--ink); filter: brightness(1.04); }
}
/* Footer */
.footer-links a { font: .15rem/1.2 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .62); }
.footer-links a:hover { color: #fff; }
@media (min-width: 1025px) { .site-footer { height: 1.84rem; } .footer-links { top: .56rem; } .footer-links li + li { margin-top: .14rem; } .footer-mark { top: .52rem; } }

/* Sentence-case headings with tight tracking */
.v2-h2, .v2-contact .contact-title { font-size: .52rem; line-height: 1.05; letter-spacing: -.025em; }
.v6-hero h1 { letter-spacing: -.025em; }
@media (max-width: 1024px) { .v2-h2, .v2-contact .contact-title { font-size: .30rem; } }

/* One button: a yellow pill, arrow in the flow */
.btn.btn-hero, .btn.btn-hero.btn-yellow, .v2-contact .submit, .btn.v2-btn {
  display: inline-flex; align-items: center; gap: .10rem; width: auto; height: .56rem; padding: 0 .28rem;
  border: 0; border-radius: 999px; background: var(--yellow); color: var(--ink);
  font: .17rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; }
.btn.btn-hero svg, .btn.v2-btn svg { position: static; width: .14rem; height: .16rem; color: var(--ink); }
.btn.btn-hero:hover, .v2-contact .submit:hover { filter: brightness(1.04); text-decoration: none; }
.v2-contact .submit { width: 100%; justify-content: center; margin-top: .24rem; }
@media (max-width: 1024px) {
  .btn.btn-hero, .btn.btn-hero.btn-yellow, .v2-contact .submit, .btn.v2-btn { height: .48rem; padding: 0 .22rem; font-size: .155rem; }
}
.v4-sticky { border: 0; border-radius: 999px; background: var(--yellow); color: var(--ink); font-family: "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }
.v6-head-cta { border: 0; }

/* One media frame */
.v6-hero-media video, .v6-hero-media img, .v5-step-media > img, .v5-dash img, .v4-alarm-stage, .v2-kit, .v2-film-frame, .v4-incident {
  border-radius: var(--media-radius); }
.v5-step-media > img, .v5-dash img, .v4-incident { box-shadow: var(--media-shadow); }
.v6-hero-media video { display: block; width: 100%; height: auto; box-shadow: 0 .30rem .80rem rgba(0, 0, 0, .40); }
.v5-dark { background: none; padding: 0; }
.v5-dark .v4-alarm figcaption { color: var(--text); }
.v5-dark .v4-cap-alert { color: #b3261e; }
@media (max-width: 1024px) { .v6-hero-media { display: none; } }

/* Film: one calm play button */
.v2-film-frame { position: relative; }
.v8-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: .88rem; height: .88rem; border: 0; border-radius: 50%;
  background: var(--yellow); cursor: pointer; box-shadow: 0 .10rem .36rem rgba(0, 0, 0, .35); transition: transform .2s; }
.v8-play span { position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: .24rem solid var(--ink); border-top: .15rem solid transparent; border-bottom: .15rem solid transparent; }
.v8-play:hover { transform: translate(-50%, -50%) scale(1.05); }
.v8-play[hidden] { display: none; }
@media (max-width: 1024px) { .v8-play { width: .64rem; height: .64rem; } .v8-play span { border-left-width: .18rem; border-top-width: .11rem; border-bottom-width: .11rem; } }
@media (prefers-reduced-motion: reduce) { .v8-play { transition: none; } }

/* Logos: calm tiles in official colors */
.v4-logos li { background: #fff; border: 1px solid rgba(37, 37, 37, .07); box-shadow: none; }
.v5-int .v4-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.v4-logos img { max-height: .30rem; }
@media (max-width: 1024px) { .v5-int .v4-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Step 04: the map full width, the two charts side by side */
.v5-data { display: grid; grid-template-columns: 1fr 1fr; gap: .24rem; }
.v5-data .v5-dash:first-child { grid-column: 1 / -1; }
@media (max-width: 1024px) { .v5-data { grid-template-columns: 1fr; gap: .16rem; } }

/* Install list bullets match the pilot list */
.v2-list li::before { width: .08rem; height: .08rem; background: var(--ink); border: 0; transform: translateY(-.02rem); }

/* Form: soft fields, a yellow focus ring, larger boxes */
.v2-contact .form { background: #fff; border-radius: .24rem; padding: .40rem; border: 0; box-shadow: 0 .16rem .48rem rgba(37, 37, 37, .08); }
.v2-contact .field input[type="text"], .v2-contact .field input[type="email"], .v2-contact .field input[type="tel"],
.v2-contact .field select:not(#f-country), .v2-contact .field textarea, .v2-contact #f-system-other {
  border: 1px solid rgba(37, 37, 37, .16); border-radius: .12rem; }
.v2-contact .field input[type="text"], .v2-contact .field input[type="email"], .v2-contact .field input[type="tel"], .v2-contact .field select:not(#f-country) { height: 48px; padding-left: 14px; }
.v2-contact .field-phone input[type="tel"] { padding-left: 56px; }
.v2-contact .field input:focus, .v2-contact .field select:focus, .v2-contact .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.v2-contact .check .box { flex: 0 0 18px; height: 18px; border-radius: 5px; border-color: rgba(37, 37, 37, .3); }
.v2-contact .check span:last-child { font-family: "MD Regular", sans-serif; }
.v2-contact .v2-seg { border-color: rgba(37, 37, 37, .16); }
@media (min-width: 1025px) { .v2-contact > .contact-text { position: sticky; top: .40rem; align-self: start; } }
.v5-data { align-items: start; }
.v4-logos li.v4-logo-icon span { white-space: nowrap; font-size: .15rem; }
.v4-logos li.v4-logo-generic span { white-space: normal; }
@media (max-width: 1024px) { .v4-logos li.v4-logo-icon span { font-size: .13rem; } }
.v4-logos li.v4-logo-generic span { white-space: nowrap; }

/* ---------- v10: final review fixes ---------- */
.v10-hero { grid-template-columns: 1fr; padding-bottom: .40rem; }
.v10-hero .v6-hero-text { max-width: 7.60rem; }
.v10-hero h1 { font-size: .64rem; }
.v10-hero .v6-lead { max-width: 6.00rem; }
@media (max-width: 1024px) { .v10-hero h1 { font-size: .32rem; } .v10-hero { padding-bottom: .16rem; } }
.v4-logos li.v4-logo-generic span { white-space: nowrap; }
@media (max-width: 1024px) {
  .v4-logos img { max-height: 24px; max-width: 70%; }
}
@media (min-width: 641px) and (max-width: 1024px) { .v5-int .v4-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v10-copy { position: absolute; left: 1.12rem; bottom: .30rem; font: .13rem/1 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .45); }
@media (max-width: 1024px) { .v10-copy { left: .24rem; bottom: .16rem; font-size: .11rem; } .site-footer { height: 1.60rem; } }
.v10-done { display: grid; justify-items: center; gap: .14rem; padding: .60rem .20rem; text-align: center; }
.v10-done[hidden] { display: none; }
.v10-done > span { width: .64rem; height: .64rem; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; font: .30rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v10-done-title { font: .24rem/1.3 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v10-again { border: 0; background: none; font: .16rem/1 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); text-decoration: underline; cursor: pointer; }
.v10-talk .v2-includes-title, .v10-talk .v2-includes, .v10-talk .v5-goal, .v10-talk .v5-pilot-sub { display: none; }
.v2-contact .check { align-items: flex-start; }
.v2-contact .check .box { margin-top: 2px; }
@media (max-width: 640px) { .v2-contact .form { padding: .20rem .16rem; } }
@media (min-width: 641px) and (max-width: 1024px) { .v5-dash { max-width: 560px; margin: 0 auto; width: 100%; } }
.v2-contact .form > [hidden] { display: none !important; }
.v2-contact .form:has(.v10-done:not([hidden])) { display: grid; place-items: center; min-height: 4.20rem; }
@media (max-width: 1024px) { .v2-contact .form:has(.v10-done:not([hidden])) { min-height: 2.60rem; } }

/* ---------- v11: product row from the reference pack (graphite cards, real-product cutouts) ---------- */
.v11-parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .20rem; margin-top: .32rem; }
.v11-part { background: #11181e; border-radius: var(--media-radius); padding: .32rem .32rem .30rem; display: flex; flex-direction: column; }
.v11-part img { display: block; width: 100%; height: 2.20rem; object-fit: contain; margin-bottom: .20rem; }
.v11-part h3 { font: .22rem/1.2 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: #edf0f2; }
.v11-part ul { margin-top: .08rem; display: grid; gap: .02rem; }
.v11-part li { font: .15rem/1.5 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: #a6b2bb; }
@media (max-width: 1024px) {
  .v11-parts { grid-template-columns: 1fr; gap: .12rem; margin-top: .20rem; }
  .v11-part { display: grid; grid-template-columns: 1.30rem 1fr; gap: .14rem; align-items: center; padding: .16rem; }
  .v11-part img { height: 1.00rem; margin: 0; grid-row: span 2; }
  .v11-part h3 { font-size: .17rem; align-self: end; }
  .v11-part ul { margin-top: 0; align-self: start; } .v11-part li { font-size: .145rem; }
}

/* ---------- v12: "Canary in the field" gallery (real customer-site photos, mosaic + lightbox) ---------- */
.v12-field { background: #0e1418; color: #edf0f2; padding: 1.20rem 1.12rem; }
.v12-field .v2-h2 { color: #fff; }
.v12-head { display: flex; align-items: baseline; justify-content: space-between; gap: .24rem; margin-bottom: .36rem; }
.v12-sub { font: .18rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: #a6b2bb; }
.v12-grid { display: grid; gap: .12rem; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 2.40rem;
  grid-template-areas: "a a b c" "d e b f" "g g h f"; }
.v12-shot { min-width: 0; }
.v12-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #11181e; cursor: zoom-in;
  border-radius: var(--media-radius); overflow: hidden; }
.v12-open img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s; }
.v12-open:hover img { transform: scale(1.04); }
.v12-open:focus-visible { outline: 3px solid var(--yellow, #ffd400); outline-offset: 3px; }
.v12-box { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.v12-box::backdrop { background: rgba(5, 8, 10, .92); }
.v12-box[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.v12-box figure { margin: 0; display: grid; justify-items: center; gap: 14px; min-width: 0; }
.v12-box img { max-width: min(92vw, 1600px); max-height: 82vh; width: auto; height: auto; border-radius: 10px; }
.v12-box figcaption { color: #edf0f2; font: 16px/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; }
.v12-x, .v12-nav { background: rgba(255,255,255,.10); color: #fff; border: 0; border-radius: 999px; width: 48px; height: 48px;
  font: 30px/1 system-ui, sans-serif; cursor: pointer; margin: 0 16px; }
.v12-x { position: fixed; top: 16px; right: 0; }
.v12-x:hover, .v12-nav:hover { background: rgba(255,255,255,.22); }
@media (max-width: 1024px) {
  .v12-field { padding: .56rem 0 .56rem .24rem; }
  .v12-head { display: block; margin-bottom: .20rem; padding-right: .24rem; }
  .v12-sub { font-size: .15rem; margin-top: .06rem; }
  .v12-grid { grid-template-areas: none; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 2.90rem;
    grid-auto-rows: 3.40rem; gap: .10rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: .24rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .v12-grid::-webkit-scrollbar { display: none; }
  .v12-shot { grid-area: auto !important; scroll-snap-align: start; }
  .v12-box img { max-width: 100vw; border-radius: 0; }
  .v12-nav { position: fixed; bottom: 24px; margin: 0; }
  .v12-prev { left: 24px; } .v12-next { right: 24px; }
  .v12-box[open] { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .v12-open img { transition: none; } .v12-open:hover img { transform: none; } }

/* v13 (2026-11-01): How Canary works as step cards, and clearer section starts. Igor: step 01 was hard to read and the steps
   looked plain; each section should read as a new section. The steps sit as white cards on stone; Installation moves to paper
   so the two sections no longer share a background. Each section title gets a short yellow bar above it. */
.v5-how { background: var(--stone); }
.v2-install { background: var(--paper); }
.v5-how > .v2-h2, .v2-install .v2-h2, .v12-field .v2-h2 { position: relative; padding-top: .30rem; }
.v5-how > .v2-h2::before, .v2-install .v2-h2::before, .v12-field .v2-h2::before {
  content: ""; position: absolute; left: 0; top: 0; width: .56rem; height: .06rem; border-radius: .03rem; background: var(--yellow); }
.v5-how > .v2-h2 { font-size: .64rem; line-height: 1.04; letter-spacing: -.03em; }
.v5-steps { margin-top: .56rem; gap: .32rem; }
.v5-step { background: #fff; border-radius: .32rem; padding: .48rem .48rem .48rem .56rem; grid-template-columns: 3.60rem 1fr; gap: .64rem;
  box-shadow: 0 .02rem .04rem rgba(37, 37, 37, .04), 0 .20rem .60rem rgba(37, 37, 37, .06); }
.v5-step-wide { grid-template-columns: 1fr; padding: .56rem; }
.v5-num { width: auto; height: auto; padding: .07rem .14rem; border-radius: .40rem; font: .15rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; }
.v5-h3 { margin-top: .24rem; font-size: .38rem; line-height: 1.1; letter-spacing: -.02em; }
.v5-body { margin-top: .18rem; }
.v5-step-media > img, .v5-step-media .v4-alarm-stage { border-radius: .20rem; box-shadow: none; }
.v5-dark { background: #f4f3ef; border-radius: .24rem; padding: .24rem; }
.v5-int, .v5-data { background: #f4f3ef; border-radius: .24rem; padding: .32rem; }
.v5-int .v4-logos li { background: #fff; }
.v5-data img { box-shadow: 0 .02rem .10rem rgba(37, 37, 37, .06); }

/* step 01: the forklift and its 10 ft ring, the rule card over the racks at the bottom right */
.v5-policy { background: #f4f3ef; border-radius: .24rem; padding: .24rem; }
.v13-shot { position: relative; }
.v13-shot img { display: block; width: 100%; height: auto; border-radius: .20rem; }
.v5-policy .v13-ring { position: absolute; left: 25.4%; top: 43.4%; transform: translate(-50%, -50%); background: #e2483d; color: #fff;
  font: .14rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; padding: .06rem .10rem; border-radius: .40rem; box-shadow: 0 .04rem .12rem rgba(0, 0, 0, .18); }
.v5-policy .v5-rule { left: auto; right: .36rem; bottom: auto; top: .36rem; max-width: 3.10rem; padding: .22rem .24rem;
  box-shadow: 0 .16rem .48rem rgba(20, 20, 20, .28); }

@media (max-width: 1024px) {
  .v5-how > .v2-h2 { font-size: .36rem; }
  .v5-how > .v2-h2, .v2-install .v2-h2, .v12-field .v2-h2 { padding-top: .20rem; }
  .v5-how > .v2-h2::before, .v2-install .v2-h2::before, .v12-field .v2-h2::before { width: .40rem; height: .05rem; }
  .v5-steps { margin-top: .28rem; gap: .16rem; }
  .v5-step, .v5-step-wide { grid-template-columns: 1fr; padding: .22rem .18rem .18rem; border-radius: .22rem; gap: .18rem; }
  .v5-num { font-size: .12rem; padding: .06rem .12rem; }
  .v5-h3 { margin-top: .14rem; font-size: .26rem; }
  .v5-dark, .v5-int, .v5-data { padding: .14rem; border-radius: .16rem; }
  .v5-policy { padding: .14rem; border-radius: .16rem; }
  .v5-policy .v13-ring { font-size: .12rem; }
  .v5-policy .v5-rule { position: static; max-width: none; margin-top: .10rem; }
}

/* step 02 (2026-11-01): the worker comes close and stays close while the red bars blink on and off; the far photo shows
   only in the safe phase. Before, the blink let the far photo through, so the worker seemed to jump back and forth. */
.v4-alarm-close { animation: v13-close 3.6s infinite; }
.v4-alarm-alert { animation-name: v13-alarm; }
@keyframes v13-close { 0%, 40% { opacity: 0; } 42%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes v13-alarm { 0%, 42% { opacity: 0; } 43%, 52% { opacity: 1; } 53%, 58% { opacity: 0; } 59%, 68% { opacity: 1; } 69%, 74% { opacity: 0; } 75%, 92% { opacity: 1; } 94%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .v4-alarm-close { display: none; } }

/* step 03 (2026-11-01): the same 12 systems as the film. When the step is on screen, the event card pings, a dot runs down
   the line, and each system gets a check mark in turn; the loop restarts every 6 s. site.js adds .v13-run in view only. */
.v5-int { gap: 0; }
.v13-flow { position: relative; width: 2px; height: .44rem; margin: 0 auto; background: repeating-linear-gradient(180deg, rgba(37, 37, 37, .22) 0 .06rem, transparent .06rem .11rem); }
.v13-flow span { position: absolute; left: 50%; top: 0; width: .12rem; height: .12rem; margin-left: -.06rem; border-radius: 50%; background: #2fbf6b; opacity: 0; box-shadow: 0 0 0 .04rem rgba(47, 191, 107, .25); }
.v5-int .v13-sys { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v13-sys li { position: relative; }
.v13-sys li::after { content: "\2713"; position: absolute; top: -.09rem; right: -.09rem; width: .26rem; height: .26rem; border-radius: 50%;
  background: #2fbf6b; color: #fff; font: .15rem/.26rem "MD SemiBold", system-ui; text-align: center; box-shadow: 0 0 0 .03rem #fff; opacity: 0; transform: scale(.4); }
.v13-run .v4-incident { animation: v13-ping 6s infinite; }
.v13-run .v13-flow span { animation: v13-dot 6s infinite; }
.v13-run .v13-sys li { animation: v13-tile 6s calc(1s + var(--i) * .12s) infinite both; }
.v13-run .v13-sys li::after { animation: v13-check 6s calc(1s + var(--i) * .12s) infinite both; }
@keyframes v13-ping { 0% { box-shadow: 0 0 0 0 rgba(47, 191, 107, 0); } 5% { box-shadow: 0 0 0 .06rem rgba(47, 191, 107, .30); } 14%, 100% { box-shadow: 0 0 0 0 rgba(47, 191, 107, 0); } }
@keyframes v13-dot { 0%, 3% { top: 0; opacity: 0; } 5% { opacity: 1; } 15% { top: calc(100% - .12rem); opacity: 1; } 18%, 100% { top: calc(100% - .12rem); opacity: 0; } }
@keyframes v13-tile { 0% { border-color: rgba(37, 37, 37, .07); } 3% { border-color: #2fbf6b; } 12%, 78% { border-color: rgba(47, 191, 107, .45); } 86%, 100% { border-color: rgba(37, 37, 37, .07); } }
@keyframes v13-check { 0% { opacity: 0; transform: scale(.4); } 4% { opacity: 1; transform: scale(1.15); } 7%, 78% { opacity: 1; transform: scale(1); } 86%, 100% { opacity: 0; transform: scale(.6); } }
@media (max-width: 1024px) {
  .v5-int .v13-sys { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v13-sys li::after { width: .22rem; height: .22rem; font-size: .12rem; line-height: .22rem; top: -.07rem; right: -.07rem; }
  .v13-flow { height: .32rem; }
}
@media (prefers-reduced-motion: reduce) { .v13-sys li::after { opacity: 1; transform: none; animation: none !important; } .v13-run * { animation: none !important; } }

/* Install kit (2026-11-01): the cloud connects down from the systems the team already uses, so the diagram ends in their
   tools, as in step 03. The strip sits on the kit's own dark background. */
.v2-kit { background: #111; }
.v13-cloud { padding: .36rem .40rem 0; text-align: center; }
.v13-cloud p { font: .14rem/1.3 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.v13-chips { list-style: none; margin: .18rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .10rem; }
.v13-chips li { height: .50rem; padding: 0 .18rem; background: #fff; border-radius: .12rem; display: flex; align-items: center; gap: .08rem;
  font: .15rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v13-chips li.dk { background: #2a2d31; }
.v13-chips img { max-height: .24rem; max-width: 1.30rem; width: auto; height: auto; display: block; }
.v13-chips li.ic img, .v13-chips li.ic svg { width: .24rem; height: .24rem; max-width: none; }
.v13-down { display: block; width: 2px; height: .44rem; margin: .14rem auto -.16rem; position: relative; z-index: 1;
  background: repeating-linear-gradient(180deg, var(--yellow) 0 .06rem, transparent .06rem .11rem); }
@media (max-width: 1024px) {
  .v13-cloud { padding: .20rem .14rem 0; }
  .v13-cloud p { font-size: .11rem; }
  .v13-chips { gap: .06rem; margin-top: .12rem; }
  .v13-chips li { height: .34rem; padding: 0 .10rem; font-size: .12rem; border-radius: .08rem; gap: .05rem; }
  .v13-chips img { max-height: .16rem; max-width: .86rem; }
  .v13-chips li.ic img, .v13-chips li.ic svg { width: .17rem; height: .17rem; }
  .v13-down { height: .30rem; margin-bottom: -.10rem; }
}

/* Funnel (2026-11-01, Igor): the pilot is the one goal. After the film and after each section a short line and the
   "Request a pilot" button; on desktop the header with its button stays at the top; on phones the floating button does
   that job. The form side lists what a pilot gives. */
.v13-cta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .32rem; margin-top: .48rem;
  padding: .26rem .26rem .26rem .40rem; border-radius: .28rem; background: #fff; box-shadow: 0 .02rem .04rem rgba(37, 37, 37, .04), 0 .20rem .60rem rgba(37, 37, 37, .06); }
.v13-cta p { font: .28rem/1.2 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.015em; color: var(--ink); }
.v13-cta .btn { margin: 0; flex: none; }
.v2-install .v13-cta { background: var(--stone); box-shadow: none; }
.v13-cta-dark { background: rgba(255, 255, 255, .06); box-shadow: none; }
.v13-cta-dark p { color: #fff; }
.v2-film .v13-cta { margin-top: .32rem; }
.v13-pilot { list-style: none; margin: .16rem 0 0; padding: 0; display: grid; gap: .20rem; }
.v13-pilot li { position: relative; display: grid; gap: .04rem; padding-left: .38rem; }
.v13-pilot li::before { content: "\2713"; position: absolute; left: 0; top: .01rem; width: .24rem; height: .24rem; border-radius: 50%;
  background: var(--ink); color: var(--yellow); font: .13rem/.24rem "MD SemiBold", system-ui; text-align: center; }
.v13-pilot b { font: .19rem/1.3 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; color: var(--ink); }
.v13-pilot span { font: .16rem/1.45 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: #3b3b33; max-width: 4.80rem; }
@media (min-width: 1025px) {
  .site-header { position: sticky; top: 0; z-index: 40; }
  html { scroll-padding-top: var(--header, 1.00rem); }
}
@media (max-width: 1024px) {
  .v13-cta { flex-direction: column; align-items: flex-start; gap: .14rem; margin-top: .28rem; padding: .22rem .20rem; border-radius: .20rem; }
  .v13-cta p { font-size: .20rem; }
  .v13-pilot { gap: .14rem; }
  .v13-pilot li { padding-left: .30rem; }
  .v13-pilot li::before { width: .20rem; height: .20rem; font-size: .11rem; line-height: .20rem; }
  .v13-pilot b { font-size: .16rem; } .v13-pilot span { font-size: .14rem; }
}
/* fixes: the light-on-dark logos keep a dark tile; chip logos get a fixed box so SVGs without a size cannot collapse */
.v5-int .v4-logos li.v4-logo-dark { background: var(--charcoal); }
.v13-chips li:not(.ic) { width: 1.40rem; justify-content: center; padding: 0 .14rem; }
.v13-chips li:not(.ic) img { width: 100%; height: .24rem; max-width: none; max-height: none; object-fit: contain; }
@media (max-width: 1024px) { .v13-chips li:not(.ic) { width: .96rem; padding: 0 .08rem; } .v13-chips li:not(.ic) img { height: .17rem; } }
.v13-cloud { background: linear-gradient(180deg, #111 0%, #1d1e1b 100%); }

/* Installation (2026-11-01, Igor): benefit, benefit, benefit, then the explainer pictures */
.v2-install .v2-install-text { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr; gap: .36rem; }
.v13-benefits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .20rem; }
.v13-benefits li { background: var(--stone); border-radius: .24rem; padding: .30rem .32rem; display: grid; gap: .08rem; align-content: start; }
.v13-benefits b { font: .28rem/1.15 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; letter-spacing: -.015em; color: var(--ink); }
.v13-benefits span { font: .17rem/1.45 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }
@media (max-width: 1024px) {
  .v2-install .v2-install-text { gap: .20rem; }
  .v13-benefits { grid-template-columns: 1fr; gap: .10rem; }
  .v13-benefits li { padding: .18rem .20rem; border-radius: .16rem; }
  .v13-benefits b { font-size: .20rem; } .v13-benefits span { font-size: .15rem; }
}

/* The bird (2026-11-01, Igor: "we love that bird"): it peeks over the top edge of a few cards and rises when it comes into
   view; a small mark sits in the corner of the kit diagram. Sections isolate so the bird stays above their background. */
.v5-how, .v2-install, .v12-field, .v2-contact { isolation: isolate; }
.v5-step, .v13-cta { position: relative; }
.v13-peek { position: absolute; z-index: -1; top: -.46rem; width: .64rem; height: auto; pointer-events: none;
  transform: translateY(.42rem); transition: transform .8s cubic-bezier(.2, .9, .25, 1.25) .15s; }
.v13-peek.in { transform: translateY(0); }
.v13-flip { scale: -1 1; }
.v13-peek-r { right: .72rem; } .v13-peek-l { left: .72rem; } .v13-peek-cta { right: 2.40rem; } .v13-peek-form { right: .48rem; }
.v2-kit { position: relative; }
.v13-kitbird { position: absolute; right: .32rem; bottom: .26rem; width: .46rem; height: auto; z-index: 1; opacity: .95; }
@media (max-width: 1024px) {
  .v13-peek { width: .44rem; top: -.32rem; transform: translateY(.30rem); }
  .v13-peek-r { right: .36rem; } .v13-peek-l { left: .36rem; } .v13-peek-cta { right: .40rem; } .v13-peek-form { right: .30rem; }
  .v13-kitbird { width: .30rem; right: .14rem; bottom: .12rem; }
}
@media (prefers-reduced-motion: reduce) { .v13-peek { transform: none; transition: none; } }
/* fixes: the older ".v2-kit img" width rule must not reach the bird; the peeking birds read better a little larger */
.v2-kit .v13-kitbird { width: .46rem; height: auto; border-radius: 0; }
.v13-peek { width: .92rem; top: -.66rem; transform: translateY(.60rem); }
.v13-peek.in { transform: translateY(0); }
@media (max-width: 1024px) {
  .v2-kit .v13-kitbird { width: .30rem; }
  .v13-peek { width: .58rem; top: -.42rem; transform: translateY(.40rem); }
  .v13-peek.in { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .v13-peek { transform: none; } }
@media (max-width: 1024px) { .v13-peek-r, .v13-peek-form { display: none; } }   /* on phones these two would cover the title text above */

/* step 03 report (2026-11-01, Igor): the event card carries what an EHS or risk system report holds, kept short: type and
   severity, the clip, when, where, which truck, speed, the rule broken and what the alert did. Sample data, matching the map. */
.v13-report .v4-incident-app { justify-content: flex-start; }
.v13-id { margin-left: auto; letter-spacing: .04em; color: #8b8f96; font-family: "MD Medium", "MD Regular", "Helvetica Neue", Arial, sans-serif; }
.v13-thumb { position: relative; }
.v13-thumb span { position: absolute; left: .08rem; bottom: .08rem; padding: .03rem .08rem; border-radius: .06rem; background: rgba(0, 0, 0, .72);
  color: #fff; font: .12rem/1.2 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; }
.v13-sev { display: inline-block; vertical-align: middle; margin-left: .08rem; padding: .03rem .10rem; border-radius: .40rem; background: #FDECEA;
  color: #B3261E; font: .12rem/1.3 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; }
.v13-facts { margin: .18rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .08rem; }
.v13-facts div { background: #f6f6f3; border-radius: .10rem; padding: .08rem .12rem; min-width: 0; }
.v13-facts dt { font: .11rem/1.3 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8b8f96; }
.v13-facts dd { margin: .02rem 0 0; font: .15rem/1.3 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
@media (max-width: 1024px) {
  .v13-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .06rem; }
  .v13-facts dt { font-size: .10rem; } .v13-facts dd { font-size: .13rem; }
  .v13-thumb span, .v13-sev { font-size: .11rem; }
}

/* Design rules for yellow (2026-11-01, Igor: the yellow bars looked off on the gray): yellow is a light. Use it on dark
   backgrounds (accent words, section bars, the bird), or as a fill behind dark text (buttons, step numbers, tags). Never as
   thin lines or text on a light background: there the accent is ink. Every section title has the short bar above it:
   yellow on dark, ink on light and on yellow. On light backgrounds the bird gets a soft dark edge so it does not wash out. */
.v5-how > .v2-h2::before, .v2-install .v2-h2::before { background: var(--ink); }
.v2-contact .contact-title { position: relative; padding-top: .30rem; }
.v2-contact .contact-title::before { content: ""; position: absolute; left: 0; top: 0; width: .56rem; height: .06rem; border-radius: .03rem; background: var(--ink); }
.v5-how .v13-peek, .v2-install .v13-peek, .v2-contact .v13-peek { filter: drop-shadow(0 .01rem .01rem rgba(37, 37, 37, .35)) drop-shadow(0 .04rem .08rem rgba(37, 37, 37, .12)); }
@media (max-width: 1024px) {
  .v2-contact .contact-title { padding-top: .20rem; }
  .v2-contact .contact-title::before { width: .40rem; height: .05rem; }
}

/* Logos (2026-11-01, Igor: standardize them): trimmed copies in images/logos/std (mockups/logos_std.py) sized by visual
   weight, so wide and compact wordmarks read alike. --h is the desktop height in rem; phones scale it. */
.v4-logos li img.v13-logo, .v13-chips li img.v13-logo { height: calc(var(--h) * 1rem); width: auto; max-width: none; max-height: none; object-fit: contain; }
.v13-chips li:not(.ic) { width: auto; min-width: 1.30rem; padding: 0 .18rem; }
.v13-chips li img.v13-logo { height: calc(var(--h) * .78rem); }
.v4-logos li.v4-logo-icon img, .v4-logos li.v4-logo-icon svg { width: .30rem; height: .30rem; }
.v4-logos li.v4-logo-icon span { font: .16rem/1.1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; }
.v5-int .v4-logos li { height: .80rem; }
@media (max-width: 1024px) {
  .v4-logos li img.v13-logo { height: calc(var(--h) * .62rem); }
  .v13-chips li:not(.ic) { min-width: .86rem; padding: 0 .10rem; }
  .v13-chips li img.v13-logo { height: calc(var(--h) * .52rem); }
  .v4-logos li.v4-logo-icon img, .v4-logos li.v4-logo-icon svg { width: .22rem; height: .22rem; }
  .v4-logos li.v4-logo-icon span { font-size: .13rem; }
  .v5-int .v4-logos li { height: .58rem; }
}

/* Step 03 motion, v2 (2026-11-01, Igor: the loop looked cheap): it plays once each time the step comes into view. A green
   line draws down from the incident, then each system settles into a soft green edge with a check that fades in, one after
   another. No bounce and no loop; leaving the view resets it quietly. */
.v13-run .v4-incident, .v13-run .v13-flow span, .v13-run .v13-sys li, .v13-run .v13-sys li::after { animation: none !important; }
.v13-flow { background: rgba(37, 37, 37, .10); width: 2px; }
.v13-flow span { display: none; }
.v13-flow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(47, 191, 107, .2), #2fbf6b);
  transform: scaleY(0); transform-origin: top; transition: transform .2s ease; }
.v13-run .v13-flow::after { transform: scaleY(1); transition: transform .7s cubic-bezier(.4, 0, .2, 1) .25s; }
.v13-sys li { transition: border-color .2s ease, box-shadow .2s ease; }
.v13-sys li::after { width: .22rem; height: .22rem; top: -.07rem; right: -.07rem; font-size: .12rem; line-height: .22rem; opacity: 0; transform: scale(.85);
  transition: opacity .2s ease, transform .2s ease; box-shadow: 0 0 0 .025rem #fff, 0 .02rem .06rem rgba(30, 140, 78, .35); }
.v13-run .v13-sys li { border-color: rgba(47, 191, 107, .55); box-shadow: 0 .03rem .12rem rgba(47, 191, 107, .12);
  transition: border-color .6s ease calc(.9s + var(--i) * 70ms), box-shadow .6s ease calc(.9s + var(--i) * 70ms); }
.v13-run .v13-sys li::after { opacity: 1; transform: scale(1);
  transition: opacity .5s ease calc(.95s + var(--i) * 70ms), transform .6s cubic-bezier(.2, .8, .2, 1) calc(.95s + var(--i) * 70ms); }
.v13-sys li.v4-logo-dark { border-color: var(--charcoal); }
.v13-run .v13-sys li.v4-logo-dark { border-color: #2fbf6b; }
@media (max-width: 1024px) { .v13-sys li::after { width: .18rem; height: .18rem; font-size: .10rem; line-height: .18rem; top: -.05rem; right: -.05rem; } }
@media (prefers-reduced-motion: reduce) { .v13-flow::after, .v13-sys li, .v13-sys li::after { transition: none !important; } }

/* Incident card v2 (2026-11-01, Igor): four facts, and the clip reads as a video (a play button in the middle) */
.v13-thumb { overflow: hidden; border-radius: .10rem; }
.v13-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .18); }
.v13-playbtn { position: absolute; left: 50%; top: 50%; z-index: 1; width: .46rem; height: .46rem; transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(255, 255, 255, .94); box-shadow: 0 .04rem .14rem rgba(0, 0, 0, .3); }
.v13-playbtn::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-left: .14rem solid var(--ink);
  border-top: .09rem solid transparent; border-bottom: .09rem solid transparent; }
.v13-thumb .v13-dur { position: absolute; z-index: 1; right: .08rem; left: auto; bottom: .08rem; padding: .03rem .08rem; border-radius: .06rem;
  background: rgba(0, 0, 0, .72); color: #fff; font: .12rem/1.2 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; }
.v13-thumb > span:not(.v13-playbtn):not(.v13-dur) { display: none; }
.v13-report .v4-incident-row { grid-template-columns: 2.10rem 1fr; }
.v13-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .v13-report .v4-incident-row { grid-template-columns: 1.40rem 1fr; }
  .v13-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v13-playbtn { width: .34rem; height: .34rem; } .v13-playbtn::after { border-left-width: .10rem; border-top-width: .065rem; border-bottom-width: .065rem; }
}

/* Birds v2 (2026-11-01, Igor): a bird sits on the top edge of a card, whole and in front, with its tail over the edge
   (feet at 64% of the picture's height). Every bird flips to face the other way when the pointer passes over it, or on a
   tap; it stays that way until the next pass, so people can play with it. The header logo's bird flips the same way. */
.v13-peek { z-index: 2; width: .80rem; top: -.51rem; pointer-events: auto; cursor: pointer; transform: none; opacity: 0; translate: 0 -.10rem;
  transition: opacity .5s ease .1s, translate .7s cubic-bezier(.3, 1.6, .5, 1) .1s, rotate .65s cubic-bezier(.34, 1.56, .64, 1); }
.v13-peek.in { transform: none; opacity: 1; translate: 0 0; }
.v13-peek-r { right: .72rem; } .v13-peek-l { left: .72rem; } .v13-peek-cta { right: 2.40rem; } .v13-peek-form { right: .48rem; }
.v5-step-wide { margin-top: .32rem; }
.v13-cta { margin-top: .64rem; }
.v13-flip { scale: -1 1; }
.v13-bird { transition: rotate .65s cubic-bezier(.34, 1.56, .64, 1); cursor: pointer; }
.v13-bird.is-flipped, .v13-peek.is-flipped { rotate: y 180deg; }
.v2-kit .v13-kitbird { pointer-events: auto; transition: rotate .65s cubic-bezier(.34, 1.56, .64, 1); }
.v2-kit .v13-kitbird.is-flipped { rotate: y 180deg; }
.footer-mark { transition: rotate .65s cubic-bezier(.34, 1.56, .64, 1); cursor: pointer; }
.footer-mark.is-flipped { rotate: y 180deg; }
.logo:hover .brand-ring, .logo:focus-visible .brand-ring { transform: none; }
.logo:hover .brand-bird, .logo:focus-visible .brand-bird { animation: none; }
.brand-bird { transition: transform .65s cubic-bezier(.34, 1.56, .64, 1); }
.logo.is-flipped .brand-bird { transform: scaleX(-1); }
@media (max-width: 1024px) {
  .v13-peek { width: .52rem; top: -.33rem; }
  .v13-peek-l { left: .36rem; } .v13-peek-cta { right: .40rem; }
  .v5-step-wide { margin-top: .16rem; }
  .v13-cta { margin-top: .40rem; }
}
@media (prefers-reduced-motion: reduce) { .v13-peek, .v13-bird, .v2-kit .v13-kitbird, .footer-mark, .brand-bird { transition: none; } }
/* fix: the older ".v13-thumb span" badge rule must not reach the play button */
.v13-thumb .v13-playbtn { left: 50%; top: 50%; bottom: auto; padding: 0; width: .46rem; height: .46rem; border-radius: 50%; background: rgba(255, 255, 255, .94); }
@media (max-width: 1024px) { .v13-thumb .v13-playbtn { width: .34rem; height: .34rem; } }

/* Step 03 motion, v3 (2026-11-01, Igor: keep it running, but smooth): a calm 7 s loop while the step is on screen.
   The incident card glows once, a green line draws down, each system eases into a green edge with a check, one after
   another; all of them hold, then fade back together, and the loop starts again. Only opacity, transform and colors move. */
.v13-run .v4-incident { animation: v13-send 7s ease-in-out infinite !important; }
.v13-run .v13-flow::after { transition: none; animation: v13-draw 7s cubic-bezier(.4, 0, .2, 1) infinite; }
.v13-run .v13-sys li { transition: none; animation: v13-tile3 7s ease-in-out infinite !important; animation-delay: calc(var(--i) * 90ms) !important; }
.v13-run .v13-sys li::after { transition: none; animation: v13-check3 7s cubic-bezier(.2, .7, .2, 1) infinite !important; animation-delay: calc(var(--i) * 90ms) !important; }
.v13-sys li, .v13-run .v13-sys li { border-color: rgba(37, 37, 37, .07); box-shadow: none; }
.v13-sys li.v4-logo-dark, .v13-run .v13-sys li.v4-logo-dark { border-color: var(--charcoal); }
@keyframes v13-send { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 191, 107, 0); } 6% { box-shadow: 0 0 0 .05rem rgba(47, 191, 107, .28); } 16% { box-shadow: 0 0 0 0 rgba(47, 191, 107, 0); } }
@keyframes v13-draw { 0%, 4% { transform: scaleY(0); opacity: 1; } 16% { transform: scaleY(1); opacity: 1; } 84% { transform: scaleY(1); opacity: 1; } 94%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes v13-tile3 { 0%, 15% { border-color: rgba(37, 37, 37, .07); } 22%, 80% { border-color: rgba(47, 191, 107, .55); } 92%, 100% { border-color: rgba(37, 37, 37, .07); } }
@keyframes v13-check3 { 0%, 15% { opacity: 0; transform: scale(.8); } 22%, 80% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  .v13-run .v4-incident, .v13-run .v13-flow::after, .v13-run .v13-sys li, .v13-run .v13-sys li::after { animation: none !important; }
  .v13-sys li::after { opacity: 1; transform: none; } .v13-flow::after { transform: scaleY(1); }
}

/* Bird flip, v2 (Igor: smoother, simpler): an even half-second turn with no overshoot, on the GPU. */
.v13-peek, .v2-kit .v13-kitbird, .footer-mark { will-change: rotate; }
.v13-peek { transition: opacity .5s ease .1s, translate .6s ease .1s, rotate .5s cubic-bezier(.45, 0, .2, 1); }
.v2-kit .v13-kitbird, .footer-mark { transition: rotate .5s cubic-bezier(.45, 0, .2, 1); }
.brand-bird { transition: transform .5s cubic-bezier(.45, 0, .2, 1); }
.v13-run .v13-sys li::after { opacity: 0; transform: scale(.8); }   /* hidden until each tile's turn in the loop */

/* Pilot timeline and FAQ (2026-11-01, Igor): right before the form, so the two last questions ("how big is this?" and
   "what could go wrong?") are answered at the moment of decision. Pilot on paper, FAQ on stone, then the yellow form. */
.v13-pilot-sec, .v13-faq-sec { padding: 1.20rem 1.12rem; isolation: isolate; }
.v13-pilot-sec { background: var(--paper); }
.v13-faq-sec { background: var(--stone); display: grid; grid-template-columns: 3.60rem 1fr; gap: .64rem; align-items: start; }
.v13-sec-head .v2-h2 { position: relative; padding-top: .30rem; }
.v13-sec-head .v2-h2::before { content: ""; position: absolute; left: 0; top: 0; width: .56rem; height: .06rem; border-radius: .03rem; background: var(--ink); }
.v13-lead { margin-top: .18rem; font: .22rem/1.45 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); max-width: 6.40rem; }
.v13-steps { list-style: none; margin: .48rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .20rem; counter-reset: v13s; }
.v13-steps li { counter-increment: v13s; position: relative; background: var(--stone); border-radius: .24rem; padding: .30rem .28rem .32rem; display: grid; gap: .08rem; align-content: start; }
.v13-steps li::before { content: "0" counter(v13s); justify-self: start; padding: .07rem .14rem; border-radius: .40rem; background: var(--yellow); color: var(--ink); font: .15rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; }
.v13-steps li:not(:last-child)::after { content: ""; position: absolute; top: .44rem; right: -.20rem; width: .20rem; height: 2px; background: rgba(37, 37, 37, .18); }
.v13-when { margin-top: .10rem; font: .13rem/1.2 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #6a6f76; }
.v13-steps b { font: .26rem/1.2 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; letter-spacing: -.015em; color: var(--ink); }
.v13-steps li > span:last-child { font: .17rem/1.5 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }
.v13-pilot-sec .v13-cta { background: var(--stone); box-shadow: none; margin-top: .40rem; }
.v13-faq { border-top: 1px solid rgba(37, 37, 37, .14); }
.v13-faq details { border-bottom: 1px solid rgba(37, 37, 37, .14); }
.v13-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: .24rem; padding: .24rem 0;
  font: .22rem/1.3 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v13-faq summary::-webkit-details-marker { display: none; }
.v13-faq summary::after { content: ""; flex: none; width: .26rem; height: .26rem; border-radius: 50%; background: #fff no-repeat center / .12rem
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23252525' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  transition: transform .3s ease; }
.v13-faq details[open] summary::after { transform: rotate(45deg); }
.v13-faq summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.v13-faq p { margin: -.06rem 0 .26rem; font: .18rem/1.55 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); max-width: 6.40rem; }
.v13-faq a { color: var(--ink); text-decoration: underline; text-underline-offset: .03rem; }
@media (max-width: 1024px) {
  .v13-pilot-sec, .v13-faq-sec { padding: .56rem .24rem; }
  .v13-faq-sec { grid-template-columns: 1fr; gap: .24rem; }
  .v13-sec-head .v2-h2 { padding-top: .20rem; } .v13-sec-head .v2-h2::before { width: .40rem; height: .05rem; }
  .v13-lead { font-size: .16rem; margin-top: .10rem; }
  .v13-steps { grid-template-columns: 1fr; gap: .10rem; margin-top: .24rem; }
  .v13-steps li { padding: .20rem; border-radius: .16rem; }
  .v13-steps li:not(:last-child)::after { display: none; }
  .v13-steps b { font-size: .20rem; } .v13-steps li > span:last-child { font-size: .15rem; } .v13-when { font-size: .11rem; }
  .v13-faq summary { font-size: .17rem; padding: .18rem 0; } .v13-faq p { font-size: .15rem; margin-bottom: .18rem; }
  .v13-faq summary::after { width: .22rem; height: .22rem; background-size: .10rem; }
}
@media (prefers-reduced-motion: reduce) { .v13-faq summary::after { transition: none; } }

/* Installation, v3 (2026-11-01, Igor): the title, then the installed truck, then three benefits, then the parts, then the
   diagram that ends in the customer's systems. Each block spans the full width. The benefits sit in one calm row: an ink
   disc with a yellow line icon, a short title and one line, with thin dividers between them. */
.v2-install > * { grid-column: 1 / -1; }
.v2-install .v2-install-text { display: block; }
.v2-install .v2-callouts { margin-top: .40rem; }
.v2-install .v13-benefits { margin-top: .40rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: #fff; border-radius: .28rem;
  box-shadow: 0 .02rem .04rem rgba(37, 37, 37, .04), 0 .20rem .60rem rgba(37, 37, 37, .06); }
.v2-install .v13-benefits li { background: none; border-radius: 0; padding: .34rem .36rem; display: grid; grid-template-columns: .56rem 1fr; column-gap: .20rem; row-gap: .04rem; align-items: start; }
.v2-install .v13-benefits li + li { border-left: 1px solid rgba(37, 37, 37, .10); }
.v13-ico { grid-row: 1 / span 2; width: .56rem; height: .56rem; border-radius: 50%; background: var(--ink); color: var(--yellow); display: grid; place-items: center; }
.v13-ico svg { width: .28rem; height: .28rem; }
.v2-install .v13-benefits b { align-self: end; font-size: .24rem; }
.v2-install .v13-benefits span:not(.v13-ico) { font-size: .16rem; line-height: 1.45; }
.v2-install .v11-parts { margin-top: .48rem; }
.v2-install .v2-kit { margin-top: .24rem; }
@media (max-width: 1024px) {
  .v2-install .v2-callouts, .v2-install .v13-benefits { margin-top: .24rem; }
  .v2-install .v13-benefits { grid-template-columns: 1fr; border-radius: .20rem; }
  .v2-install .v13-benefits li { padding: .18rem .20rem; grid-template-columns: .44rem 1fr; column-gap: .14rem; }
  .v2-install .v13-benefits li + li { border-left: 0; border-top: 1px solid rgba(37, 37, 37, .10); }
  .v13-ico { width: .44rem; height: .44rem; } .v13-ico svg { width: .22rem; height: .22rem; }
  .v2-install .v13-benefits b { font-size: .19rem; } .v2-install .v13-benefits span:not(.v13-ico) { font-size: .14rem; }
  .v2-install .v11-parts { margin-top: .28rem; } .v2-install .v2-kit { margin-top: .14rem; }
}
.v13-benefits .v13-ico { color: var(--yellow); }   /* the older ".v13-benefits span" text color must not dim the icon */
.v2-install .v13-benefits b { font-size: .26rem; }
.v2-install .v13-benefits span:not(.v13-ico) { font-size: .17rem; }
@media (max-width: 1024px) { .v2-install .v13-benefits b { font-size: .19rem; } .v2-install .v13-benefits span:not(.v13-ico) { font-size: .14rem; } }