/* v2 sections (2026-10 redesign draft). Flow layout on the same tokens and fonts as site.css.
   Desktop: 1rem = 100 px of the 1440 design. Phone (750 px and below): 1rem = 100 px of the 393 design. */

/* Buttons that size to their words; the arrow follows the text */
.btn.v2-btn { width: max-content; padding: 0 .26rem; gap: .18rem; }
.btn.v2-btn svg { position: static; flex: none; }
.hero-cta .v2-btn { width: max-content; }

.v2-h2 { font: .52rem/1.08 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; color: var(--ink); }
.v2-sub { margin-top: .20rem; font: .26rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; color: var(--text); }
.v2-h3 { font: .28rem/1.25 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.v2-body { margin-top: .10rem; font: .20rem/1.5 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); max-width: 5.2rem; }
.v2-tag { display: flex; align-items: center; gap: .14rem; margin-top: .32rem; font: .16rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; color: var(--ink); }
.v2-tag::before { content: ""; width: .05rem; height: .30rem; background: var(--yellow); }

/* Film: continues the dark hero */
.v2-film { background: var(--charcoal); padding: .16rem 1.12rem 1.04rem; }
.v2-film-frame { position: relative; border-radius: .24rem; overflow: hidden; background: #000; box-shadow: 0 .30rem .80rem rgba(0, 0, 0, .45); aspect-ratio: 16 / 9; }
.v2-film video { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Full screen: show the whole 16:9 film; "cover" cut the sides on 16:10 laptop screens. */
.v2-film video:fullscreen { object-fit: contain; background: #000; }
.v2-film video:-webkit-full-screen { object-fit: contain; background: #000; }
.v2-film-note { margin-top: .24rem; font: .20rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .7); }

/* Two ways */
.v2-ways { background: var(--paper); padding: 1.20rem 1.12rem 1.20rem; }
.v2-ways-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .48rem; margin-top: .64rem; }
.v2-way img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .24rem; background: var(--stone); }
.v2-way .v2-h3 { margin-top: .16rem; font-size: .36rem; }

/* Real-time alerts: dark media panel beside butter points */
.v2-alerts { display: grid; grid-template-columns: 7.20rem 1fr; background: var(--butter); }
.v2-alerts-media { background: var(--ink); padding: 1.20rem 1.12rem 1.12rem; }
.v2-alerts-media .v2-h2, .v2-alerts-media .v2-sub { color: #fff; }
.v2-alerts-media img { width: 100%; height: auto; margin-top: .56rem; border-radius: .20rem; }
.v2-points { display: grid; align-content: center; gap: .56rem; padding: 1.20rem 1.12rem 1.20rem .80rem; }
.v2-points li { border-left: .05rem solid var(--ink); padding-left: .32rem; }

/* Safety data */
.v2-data { background: var(--paper); padding: 1.20rem 1.12rem; }
.v2-data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .48rem; margin-top: .64rem; }
.v2-data-grid img { width: 100%; height: auto; border-radius: .24rem; box-shadow: 0 .12rem .40rem rgba(37, 37, 37, .12); }

/* Installation */
.v2-install { display: grid; grid-template-columns: 7.40rem 1fr; gap: .64rem; align-items: center; background: var(--stone); padding: 1.20rem 1.12rem; }
.v2-install img { width: 100%; height: auto; border-radius: .24rem; }
.v2-list { margin-top: .40rem; display: grid; gap: .22rem; }
.v2-list li { display: flex; gap: .20rem; align-items: baseline; font: .24rem/1.35 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v2-list li::before { content: ""; flex: none; width: .14rem; height: .14rem; border-radius: 50%; background: var(--yellow); border: 1px solid var(--charcoal); transform: translateY(.02rem); }

/* Pilot */
.v2-pilot { background: var(--ink); padding: 1.20rem 1.12rem 1.20rem; }
.v2-pilot .v2-h2 { color: #fff; }
.v2-pilot .v2-sub { color: rgba(255, 255, 255, .8); }
.v2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .48rem; margin-top: .64rem; }
.v2-steps li { border-top: 1px solid rgba(255, 255, 255, .25); padding-top: .28rem; }
.v2-num { display: block; font: .18rem/1 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--yellow); }
.v2-steps .v2-h3 { margin-top: .20rem; color: #fff; }
.v2-steps .v2-body { color: rgba(255, 255, 255, .75); }
.v2-pilot .v2-btn { margin-top: .72rem; }

/* Tablet */
@media (min-width: 99999px) {
  .v2-alerts { grid-template-columns: 1fr; }
  .v2-points { padding: .80rem 1.12rem; }
  .v2-install { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 1024px) {
  .v2-h2 { font-size: .30rem; }
  .v2-sub { font-size: .17rem; margin-top: .12rem; }
  .v2-h3 { font-size: .20rem; }
  .v2-body { font-size: .16rem; margin-top: .06rem; }
  .v2-tag { margin-top: .18rem; font-size: .12rem; gap: .10rem; }
  .v2-tag::before { width: .04rem; height: .22rem; }
  .btn.v2-btn { width: max-content !important; padding: 0 .20rem; gap: .14rem; }
  .hero { min-height: 5.60rem; }
  .hero-cta { top: calc(3.20rem - var(--header)); }

  .v2-film { padding: .08rem .24rem .48rem; }
  .v2-film-frame { border-radius: .14rem; }
  .v2-film-note { margin-top: .14rem; font-size: .14rem; }

  .v2-ways, .v2-data, .v2-pilot { padding: .56rem .24rem; }
  .v2-ways-grid, .v2-data-grid { grid-template-columns: 1fr; gap: .36rem; margin-top: .32rem; }
  .v2-way img, .v2-data-grid img { border-radius: .14rem; }
  .v2-way .v2-h3 { font-size: .22rem; margin-top: .08rem; }

  .v2-alerts { grid-template-columns: 1fr; }
  .v2-alerts-media { padding: .56rem .24rem .40rem; }
  .v2-alerts-media img { margin-top: .28rem; border-radius: .14rem; }
  .v2-points { gap: .28rem; padding: .48rem .24rem .56rem; }
  .v2-points li { border-left-width: .04rem; padding-left: .18rem; }

  .v2-install { grid-template-columns: 1fr; gap: .28rem; padding: .56rem .24rem; }
  .v2-install img { border-radius: .14rem; }
  .v2-install-text { order: -1; }
  .v2-list { margin-top: .20rem; gap: .12rem; }
  .v2-list li { font-size: .17rem; gap: .12rem; }
  .v2-list li::before { width: .10rem; height: .10rem; }

  .v2-steps { grid-template-columns: 1fr; gap: .28rem; margin-top: .32rem; }
  .v2-steps li { padding-top: .18rem; }
  .v2-num { font-size: .14rem; }
  .v2-steps .v2-h3 { margin-top: .10rem; }
  .v2-pilot .v2-btn { margin-top: .40rem; }
}

/* ---------- v3 (2026-10-30): tagline, real photos, risk signals, integrations, pilot form ---------- */
.v2-eyebrow { font: .15rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .16em; color: var(--text); margin-bottom: .20rem; }
.v2-pilot .v2-eyebrow { color: var(--yellow); }
.v2-caption { margin-top: .14rem; font: .15rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .6); }
.v2-alerts-media img { max-width: 4.40rem; aspect-ratio: 3 / 4; object-fit: cover; }

/* Risk signals beside the dashboard crops */
.v2-data-row { display: grid; grid-template-columns: 3.60rem 1fr; gap: .64rem; margin-top: .56rem; align-items: start; }
.v2-data-row .v2-data-grid { margin-top: 0; }
.v2-signals { display: grid; gap: .02rem; border-top: 1px solid rgba(37, 37, 37, .15); }
.v2-signals li { display: flex; align-items: center; justify-content: space-between; gap: .16rem; padding: .18rem 0; border-bottom: 1px solid rgba(37, 37, 37, .15); font: .20rem/1.3 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v2-signals li::before { content: ""; flex: none; width: .12rem; height: .12rem; border-radius: 50%; background: #e2483d; }
.v2-signals li span { flex: 1; }
.v2-soon { flex: none; font: .12rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--text); border: 1px solid rgba(37, 37, 37, .35); border-radius: .40rem; padding: .05rem .10rem; }

/* Integrations */
.v2-integrations { margin-top: .80rem; padding: .48rem; border-radius: .24rem; background: var(--stone); }
.v2-int-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .40rem; margin-top: .32rem; }
.v2-int-label { font: .13rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; color: var(--text); margin-bottom: .14rem; }
.v2-chips { display: flex; flex-wrap: wrap; gap: .10rem; }
.v2-chips li { font: .16rem/1 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: #fff; border: 1px solid rgba(37, 37, 37, .18); border-radius: .40rem; padding: .09rem .16rem; }
.v2-note { margin-top: .28rem; font: .16rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }

/* Install: text, two real photos, then the whole kit */
.v2-install { grid-template-columns: 4.40rem 1fr; }
.v2-install-photos { display: grid; grid-template-columns: 2.4fr 1fr; gap: .20rem; }
.v2-install-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: .24rem; }
.v2-install-main { aspect-ratio: 4 / 3; }
.v2-kit { grid-column: 1 / -1; margin: .24rem 0 0; background: #121820; border-radius: .24rem; overflow: hidden; }
.v2-kit img { display: block; width: 100%; height: auto; border-radius: 0; }
.v2-kit figcaption { padding: .16rem .32rem .28rem; font: .18rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .75); }

.hero-title { font-size: .56rem; line-height: 1.18; letter-spacing: -.02em; width: 6.40rem; top: calc(2.10rem - var(--header)); }
.v2-includes { margin-top: .40rem; display: grid; gap: .16rem; }
.v2-includes li { display: flex; gap: .14rem; align-items: baseline; font: .20rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v2-includes li::before { content: ""; flex: none; width: .12rem; height: .12rem; border-radius: 50%; background: var(--ink); transform: translateY(.01rem); }
.v2-includes-title { margin-top: .48rem; font: .15rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; color: var(--text); }
.v2-contact .field-consent a { color: var(--ink); text-decoration: underline; }

/* Pilot request form: flow layout, taller than the old contact box */
.v2-contact { display: grid; grid-template-columns: 4.88rem 1fr; gap: .80rem; padding: 1.04rem 1.12rem 1.04rem; min-height: 0; }
.v2-contact .form { position: relative; left: auto; top: auto; width: auto; max-width: 5.60rem; }
.v2-seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(0, 0, 0, .6); border-radius: 100px; padding: 3px; gap: 3px; }
.v2-seg label { position: relative; cursor: pointer; }
.v2-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.v2-seg span { display: block; text-align: center; padding: 8px 6px; border-radius: 100px; font: 400 14px/1.2 "Madefor Text", sans-serif; color: #000; }
.v2-seg input:checked + span { background: var(--ink); color: #fff; }
.v2-seg input:focus-visible + span { outline: 2px solid #4d90fe; outline-offset: 1px; }
.v2-qual { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.v2-qual .v2-wants { grid-column: 1 / -1; margin-top: 24px; grid-template-columns: 1fr; row-gap: 10px; }
.v2-qual .v2-wants legend { font-size: 16px; line-height: 22px; }
.v2-select label { display: block; margin-bottom: 6px; font: 400 14px/1.2 "Madefor Text", sans-serif; }
.field select:not(#f-country), .field textarea {
  display: block; width: 100%; padding: 0 12px; border: 1px solid rgba(0, 0, 0, .6); border-radius: 6px;
  background: #fff; font: 400 16px/1.4 "Madefor Text", sans-serif; color: #000;
}
.field select:not(#f-country) { height: 42px; }
.field textarea { padding: 10px 12px; resize: vertical; min-height: 84px; }
.field.invalid input { border-color: #df3131; }
[data-for][hidden] { display: none !important; }
.v2-contact .submit { width: auto; padding: 0 28px; background: var(--yellow); border-color: var(--charcoal); font-weight: 600; }

@media (min-width: 99999px) {
  .v2-data-row { grid-template-columns: 1fr; }
  .v2-install { grid-template-columns: 1fr; }
  .v2-contact { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .v2-eyebrow { font-size: .11rem; margin-bottom: .12rem; }
  .v2-caption { font-size: .12rem; }
  .v2-alerts-media img { max-width: 100%; }
  .v2-data-row { grid-template-columns: 1fr; gap: .32rem; margin-top: .28rem; }
  .v2-signals li { font-size: .16rem; padding: .12rem 0; }
  .v2-signals li::before { width: .09rem; height: .09rem; }
  .v2-soon { font-size: .10rem; }
  .v2-integrations { margin-top: .40rem; padding: .24rem; border-radius: .14rem; }
  .v2-int-cols { grid-template-columns: 1fr; gap: .24rem; margin-top: .20rem; }
  .v2-int-label { font-size: .11rem; }
  .v2-chips li { font-size: .14rem; padding: .07rem .12rem; }
  .v2-note { font-size: .14rem; }
  .v2-install-photos img, .v2-kit { border-radius: .14rem; }
  .v2-kit figcaption { font-size: .14rem; padding: .12rem .16rem .18rem; }
  .v2-install { grid-template-columns: 1fr; }
  .hero-title { font-size: .36rem; width: 3.45rem; top: calc(1.40rem - var(--header)); }
  .v2-includes { margin-top: .20rem; gap: .10rem; }
  .v2-includes li { font-size: .16rem; }
  .v2-includes-title { margin-top: .28rem; font-size: .11rem; }
  .v2-contact { grid-template-columns: 1fr; gap: .30rem; padding: .404rem .235rem .48rem; }
  .v2-contact .form { width: auto; max-width: none; margin: 0; }
  .v2-qual { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .v2-install-photos { grid-template-columns: 1fr; }
  .v2-install-close { display: none; }
}

/* Install v4 (2026-11-01): heading and list on one row, the truck callouts in the middle, then the kit */
.v2-install { display: block; }
.v2-install-text { display: grid; grid-template-columns: 1fr 1fr; gap: .64rem; align-items: end; }
.v2-install-text .v2-list { margin-top: 0; }
.v2-callouts { display: block; margin-top: .40rem; }
.v2-callouts img { display: block; width: 100%; height: auto; border-radius: 0; }
.v2-install .v2-kit { margin-top: .48rem; }
@media (max-width: 1000px) { .v2-install-text { grid-template-columns: 1fr; gap: .24rem; } }
@media (max-width: 1024px) { .v2-callouts { margin-top: .24rem; } .v2-install .v2-kit { margin-top: .28rem; } }

/* ---------- v4 (2026-11-01): Codex brief story, policy flow, alarm loop, floor map, integrations, specs ---------- */
.v4-hero-eyebrow { position: absolute; z-index: 1; left: 1.12rem; top: calc(1.84rem - var(--header)); font: .15rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .18em; color: var(--yellow); }
.v4-hero .hero-title { font-size: .58rem; line-height: 1.12; width: 6.60rem; top: calc(2.20rem - var(--header)); }
.v4-hero .hero-lead { font-size: .21rem; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.v4-hero { min-height: calc(7.60rem - var(--header)); }
.v4-hero .hero-outline { top: calc(5.70rem - var(--header)); }
.v4-hero .hero-canary { top: calc(3.20rem - var(--header)); }

/* Policy: document, rule, floor */
.v4-policy { background: var(--paper); padding: 1.20rem 1.12rem; }
.v4-flow { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: .32rem; margin-top: .56rem; align-items: stretch; counter-reset: step; }
.v4-card { position: relative; border-radius: .20rem; padding: .32rem; background: #fff; border: 1px solid rgba(37, 37, 37, .12); box-shadow: 0 .10rem .30rem rgba(37, 37, 37, .06); }
.v4-card + .v4-card::before { content: ""; position: absolute; left: -.27rem; top: 50%; width: .22rem; height: .22rem; margin-top: -.11rem; background: var(--yellow); border: 1px solid var(--charcoal); border-radius: 50%; z-index: 1; }
.v4-card-label { font: .12rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .16em; color: var(--text); margin-bottom: .18rem; }
.v4-doc-ref { font: .14rem/1.3 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }
.v4-quote { margin-top: .10rem; font: .22rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v4-rule { background: var(--ink); border-color: var(--ink); }
.v4-rule .v4-card-label { color: var(--yellow); }
.v4-rule-line { font: .19rem/1.45 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: #fff; }
.v4-rule-line + .v4-rule-line { margin-top: .08rem; }
.v4-rule-line b { font-family: "MD SemiBold", "Helvetica Neue", Arial, sans-serif; font-weight: normal; color: var(--yellow); margin-right: .06rem; }
.v4-approved { margin-top: .24rem; display: inline-flex; gap: .08rem; align-items: center; font: .14rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: var(--yellow); border-radius: .40rem; padding: .07rem .14rem; }
.v4-floor { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.v4-floor img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.v4-floor .v4-card-label { margin: .18rem .24rem .06rem; }
.v4-floor-line { margin: 0 .24rem .22rem; font: .17rem/1.35 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }

/* Driver: text beside a looping alarm */
.v4-driver { display: grid; grid-template-columns: 4.40rem 1fr; gap: .64rem; align-items: center; background: var(--ink); padding: 1.20rem 1.12rem; }
.v4-driver .v2-h2 { color: #fff; }
.v4-driver .v2-sub { color: rgba(255, 255, 255, .8); }
.v4-alarm { margin: 0; }
.v4-alarm-stage { position: relative; border-radius: .24rem; overflow: hidden; aspect-ratio: 1250 / 820; background: #111; }
.v4-alarm-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v4-alarm-alert { animation: v4-alarm 3.6s infinite; }
.v4-alarm-sound { position: absolute; left: 1.5%; top: 34%; width: 7%; height: auto; fill: none; stroke: var(--yellow); stroke-width: 6; stroke-linecap: round; transform: scaleX(-1); filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6)); }
.v4-alarm-sound path { opacity: 0; animation: v4-sound 3.6s infinite; }
.v4-alarm-sound path:nth-child(2) { animation-name: v4-sound-2; }
.v4-alarm-sound path:nth-child(3) { animation-name: v4-sound-3; }
.v4-alarm figcaption { position: relative; height: .30rem; margin-top: .16rem; font: .17rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .78); }
.v4-alarm figcaption span { position: absolute; left: 0; top: 0; }
.v4-cap-clear { animation: v4-cap-clear 3.6s infinite; }
.v4-cap-alert { color: var(--yellow); animation: v4-cap-alert 3.6s infinite; }
/* 0 to 1.4 s clear; 1.5 to 3.4 s the alert flashes with sound waves */
@keyframes v4-alarm { 0%, 40% { opacity: 0; } 42%, 52% { opacity: 1; } 55%, 58% { opacity: .15; } 61%, 71% { opacity: 1; } 74%, 77% { opacity: .15; } 80%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes v4-sound { 0%, 41% { opacity: 0; } 44% { opacity: 1; } 50% { opacity: .2; } 56% { opacity: 1; } 62% { opacity: .2; } 68% { opacity: 1; } 74% { opacity: .2; } 80% { opacity: 1; } 92% { opacity: .6; } 96%, 100% { opacity: 0; } }
@keyframes v4-sound-2 { 0%, 43% { opacity: 0; } 46% { opacity: 1; } 52% { opacity: .2; } 58% { opacity: 1; } 64% { opacity: .2; } 70% { opacity: 1; } 76% { opacity: .2; } 82% { opacity: 1; } 92% { opacity: .5; } 96%, 100% { opacity: 0; } }
@keyframes v4-sound-3 { 0%, 45% { opacity: 0; } 48% { opacity: 1; } 54% { opacity: .2; } 60% { opacity: 1; } 66% { opacity: .2; } 72% { opacity: 1; } 78% { opacity: .2; } 84% { opacity: 1; } 92% { opacity: .4; } 96%, 100% { opacity: 0; } }
@keyframes v4-cap-clear { 0%, 40% { opacity: 1; } 42%, 94% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes v4-cap-alert { 0%, 40% { opacity: 0; } 42%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .v4-alarm-alert, .v4-alarm-sound path, .v4-cap-clear, .v4-cap-alert { animation: none; }
  .v4-alarm-stage { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .12rem; background: none; overflow: visible; }
  .v4-alarm-stage img { position: static; height: auto; border-radius: .16rem; opacity: 1; }
  .v4-alarm-sound, .v4-cap-clear { display: none; }
  .v4-cap-alert { position: static !important; color: rgba(255, 255, 255, .78); }
}

/* Risk signals and the two views */
.v4-signals { display: flex; flex-wrap: wrap; gap: .10rem; margin-top: .36rem; }
.v4-signals li { display: inline-flex; align-items: center; gap: .09rem; font: .17rem/1 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: #fff; border: 1px solid rgba(37, 37, 37, .16); border-radius: .40rem; padding: .10rem .16rem; }
.v4-signals li::before { content: ""; width: .10rem; height: .10rem; border-radius: 50%; background: #e2483d; }
.v4-signals li:nth-child(2)::before, .v4-signals li:nth-child(3)::before { background: #ff9f0a; }
.v4-data-grid { display: grid; grid-template-columns: 1.9fr 1fr; gap: .32rem; margin-top: .40rem; align-items: start; }
.v4-data-grid figure { margin: 0; }
.v4-data-grid img { width: 100%; height: auto; border-radius: .20rem; box-shadow: 0 .12rem .40rem rgba(37, 37, 37, .12); }
.v4-data-grid figcaption { margin-top: .12rem; font: .16rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }

/* Integrations */
.v4-int { background: var(--stone); padding: 1.20rem 1.12rem; display: grid; grid-template-columns: 1fr 1fr; gap: .64rem; align-items: center; }
.v4-int-demo { display: flex; justify-content: flex-end; }
.v4-incident { width: 100%; max-width: 5.40rem; background: #fff; border-radius: .20rem; border: 1px solid rgba(37, 37, 37, .12); box-shadow: 0 .16rem .50rem rgba(37, 37, 37, .12); padding: .22rem; }
.v4-incident-app { font: .12rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--text); margin-bottom: .16rem; display: flex; align-items: center; gap: .08rem; }
.v4-incident-app::before { content: ""; width: .10rem; height: .10rem; border-radius: 50%; background: #34c759; }
.v4-incident-row { display: grid; grid-template-columns: 1.70rem 1fr; gap: .18rem; align-items: center; }
.v4-incident-row img { width: 100%; height: auto; border-radius: .10rem; }
.v4-incident-title { font: .18rem/1.3 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v4-incident-meta { margin-top: .05rem; font: .14rem/1.35 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }
.v4-logos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: .14rem; margin-top: .08rem; }
.v4-logos li { display: flex; align-items: center; justify-content: center; height: .84rem; padding: .14rem .20rem; background: #fff; border-radius: .14rem; border: 1px solid rgba(37, 37, 37, .08); }
.v4-logos img { max-width: 100%; max-height: .42rem; width: auto; height: auto; object-fit: contain; }
.v4-logos .v4-logo-text { font: .15rem/1.2 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); text-align: center; }

/* Specs under the kit */
.v4-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .32rem; margin: .32rem 0 0; }
.v4-specs div { border-top: .03rem solid var(--yellow); padding-top: .16rem; }
.v4-specs dt { font: .18rem/1.3 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); margin-bottom: .08rem; }
.v4-specs dd { margin: 0; font: .15rem/1.55 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }

@media (min-width: 99999px) {
  .v4-flow { grid-template-columns: 1fr 1fr; } .v4-floor { grid-column: 1 / -1; }
  .v4-driver, .v4-int { grid-template-columns: 1fr; }
  .v4-data-grid { grid-template-columns: 1fr; }
  .v4-specs { grid-template-columns: 1fr 1fr; }
  .v4-logos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1024px) {
  .v4-hero-eyebrow { left: .24rem; top: calc(1.20rem - var(--header)); font-size: .11rem; }
  .v4-hero .hero-title { font-size: .36rem; width: 3.45rem; top: calc(1.40rem - var(--header)); }
  .v4-hero .hero-lead { font-size: .16rem; }
  .v4-hero { min-height: 6.30rem; }
  .v4-hero .hero-cta { top: calc(2.95rem - var(--header)); }
  .v4-policy, .v4-driver, .v4-int { padding: .56rem .24rem; }
  .v4-flow { grid-template-columns: 1fr; gap: .28rem; margin-top: .28rem; }
  .v4-card { padding: .22rem; border-radius: .14rem; }
  .v4-card + .v4-card::before { left: 50%; top: -.20rem; margin: 0 0 0 -.09rem; width: .18rem; height: .18rem; }
  .v4-card-label { font-size: .10rem; margin-bottom: .12rem; }
  .v4-doc-ref { font-size: .12rem; } .v4-quote { font-size: .17rem; }
  .v4-rule-line { font-size: .15rem; } .v4-approved { font-size: .12rem; margin-top: .16rem; }
  .v4-floor-line { font-size: .14rem; }
  .v4-driver { grid-template-columns: 1fr; gap: .28rem; }
  .v4-alarm-stage { border-radius: .14rem; }
  .v4-alarm figcaption { font-size: .14rem; height: .24rem; }
  .v4-signals { margin-top: .20rem; gap: .07rem; } .v4-signals li { font-size: .13rem; padding: .08rem .12rem; }
  .v4-data-grid { grid-template-columns: 1fr; gap: .24rem; margin-top: .24rem; }
  .v4-data-grid figcaption { font-size: .13rem; }
  .v4-int { grid-template-columns: 1fr; gap: .28rem; }
  .v4-incident { padding: .16rem; } .v4-incident-row { grid-template-columns: 1.10rem 1fr; gap: .12rem; }
  .v4-incident-title { font-size: .15rem; } .v4-incident-meta { font-size: .12rem; }
  .v4-logos { grid-template-columns: repeat(3, 1fr); gap: .08rem; } .v4-logos li { height: .64rem; padding: .10rem; } .v4-logos img { max-height: .30rem; }
  .v4-specs { grid-template-columns: 1fr 1fr; gap: .20rem; } .v4-specs dt { font-size: .15rem; } .v4-specs dd { font-size: .13rem; }
}

/* v4 fixes after the first review */
.v4-nowrap { white-space: nowrap; }
.v4-hero .hero-outline { display: none; }
.v4-hero .hero-canary { width: 2.60rem; height: auto; left: 11.30rem; top: calc(2.60rem - var(--header)); opacity: .9; }
.v4-hero { min-height: calc(6.30rem - var(--header)); }
.v4-hero .hero-cta { width: 3.30rem; left: 7.70rem; }
.v4-floor { overflow: visible; }
.v4-floor img { border-radius: .20rem .20rem 0 0; }
.v4-int { padding-bottom: .96rem; }
.v2-kit picture { display: block; }
@media (max-width: 1024px) {
  .v4-hero { min-height: 0; padding: .30rem .24rem .36rem; display: flex; flex-direction: column; }
  .v4-hero .v4-hero-eyebrow, .v4-hero .hero-title, .v4-hero .hero-cta { position: static; width: auto; }
  .v4-hero .hero-title { margin-top: .12rem; }
  .v4-hero .hero-cta { margin-top: .20rem; }
  .v4-hero .hero-lead { font-size: .16rem; }
  .v4-hero .hero-canary { display: none; }
  .v4-int { padding-bottom: .56rem; }
}

/* v4 review fixes: trust line, pilot goal, reduced-motion captions, sticky phone CTA */
.v4-proof { margin-top: .22rem; font: .15rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .62); }
.v4-goal { margin-top: .48rem; font: .20rem/1.45 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--yellow); max-width: 7.6rem; }
@media (prefers-reduced-motion: reduce) {
  .v4-alarm figcaption { display: grid; grid-template-columns: 1fr 1fr; gap: .12rem; height: auto; }
  .v4-alarm figcaption span { position: static !important; display: block !important; opacity: 1 !important; color: rgba(255, 255, 255, .78); }
}
.v4-sticky { display: none; }
@media (max-width: 1024px) {
  .v4-proof { font-size: .12rem; margin-top: .16rem; }
  .v4-goal { font-size: .15rem; margin-top: .28rem; }
  .v4-sticky { display: inline-flex; position: fixed; z-index: 50; right: .16rem; bottom: .16rem; align-items: center; gap: .08rem;
    height: .44rem; padding: 0 .20rem; border-radius: .40rem; border: 1px solid var(--charcoal); background: var(--yellow); color: var(--charcoal);
    font: .14rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; text-decoration: none; box-shadow: 0 .06rem .20rem rgba(0, 0, 0, .25);
    opacity: 0; transform: translateY(.20rem); pointer-events: none; transition: opacity .25s, transform .25s; }
  .v4-sticky.show { opacity: 1; transform: none; pointer-events: auto; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) { .v4-sticky { transition: none; } }

/* ---------- v5 (2026-11-01): one story in four steps, pilot merged into the form ---------- */
.v5-how { background: var(--paper); padding: 1.20rem 1.12rem 1.36rem; }
.v5-steps { margin-top: .64rem; display: grid; gap: .96rem; counter-reset: none; }
.v5-step { display: grid; grid-template-columns: 4.10rem 1fr; gap: .64rem; align-items: center; }
.v5-step-text { position: relative; padding-left: .02rem; }
.v5-num { display: inline-flex; align-items: center; justify-content: center; width: .46rem; height: .46rem; border-radius: 50%;
  background: var(--yellow); border: 1px solid var(--charcoal); font: .16rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--charcoal); }
.v5-h3 { margin-top: .22rem; font: .36rem/1.15 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.015em; color: var(--ink); }
.v5-body { margin-top: .16rem; font: .19rem/1.55 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); max-width: 3.80rem; }
.v5-step-media { position: relative; min-width: 0; }
.v5-step-media > img, .v5-data img { display: block; width: 100%; height: auto; border-radius: .22rem; box-shadow: 0 .14rem .44rem rgba(37, 37, 37, .12); }
/* 01: the rule sits over the scene */
.v5-rule { position: absolute; left: .24rem; bottom: .24rem; max-width: 4.40rem; background: rgba(37, 37, 37, .94); color: #fff; border-radius: .18rem; padding: .22rem .26rem; backdrop-filter: blur(6px); }
.v5-rule-quote { font: .17rem/1.45 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: #fff; }
.v5-rule-quote span { display: block; margin-top: .04rem; font-size: .13rem; color: rgba(255, 255, 255, .6); }
.v5-rule-line { margin-top: .14rem; font: .15rem/1.45 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: rgba(255, 255, 255, .9); }
.v5-rule-line b { display: block; font: .12rem/1 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--yellow); margin-bottom: .06rem; font-weight: normal; }
.v5-rule .v4-approved { margin-top: .14rem; }
/* 02: the alarm on a dark plate */
.v5-dark { background: var(--ink); border-radius: .24rem; padding: .28rem; }
.v5-dark .v4-alarm figcaption { color: rgba(255, 255, 255, .78); }
/* 03: record card over the logo grid */
.v5-int { display: grid; gap: .24rem; }
.v5-int .v4-int-demo { justify-content: flex-start; }
.v5-int .v4-incident { max-width: none; }
.v5-int .v4-logos { grid-template-columns: repeat(6, 1fr); margin-top: 0; }
/* 04: map and trend side by side */
.v5-data { display: grid; grid-template-columns: 1.7fr 1fr; gap: .24rem; align-items: start; }
.v5-data figure { margin: 0; }
.v5-data figcaption { margin-top: .10rem; font: .15rem/1.4 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--text); }
/* pilot block beside the form */
.v5-for { margin-bottom: .16rem; }
.v5-pilot-sub { margin-top: .18rem; font: .20rem/1.5 "MD Regular", "Helvetica Neue", Arial, sans-serif; color: var(--ink); max-width: 4.60rem; }
.v5-goal { margin-top: .32rem; font: .17rem/1.45 "MD SemiBold", "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.v2-contact .v2-includes-title { margin-top: .36rem; }
#f-system-other { margin-top: 8px; display: block; width: 100%; height: 42px; padding: 0 12px; border: 1px solid rgba(0, 0, 0, .6); border-radius: 6px; background: #fff; font: inherit; }
#f-system-other[hidden] { display: none; }
.field.invalid select { border-color: #df3131; }

@media (max-width: 1024px) {
  .v5-how { padding: .56rem .24rem .64rem; }
  .v5-steps { margin-top: .32rem; gap: .52rem; }
  .v5-step { grid-template-columns: 1fr; gap: .20rem; }
  .v5-num { width: .34rem; height: .34rem; font-size: .13rem; }
  .v5-h3 { margin-top: .12rem; font-size: .24rem; }
  .v5-body { margin-top: .08rem; font-size: .15rem; max-width: none; }
  .v5-step-media > img, .v5-data img { border-radius: .14rem; }
  .v5-rule { position: static; max-width: none; margin-top: .10rem; padding: .16rem .18rem; border-radius: .14rem; }
  .v5-rule-quote { font-size: .14rem; } .v5-rule-quote span { font-size: .11rem; }
  .v5-rule-line { font-size: .13rem; } .v5-rule-line b { font-size: .10rem; }
  .v5-dark { padding: .14rem; border-radius: .16rem; }
  .v5-int .v4-logos { grid-template-columns: repeat(3, 1fr); }
  .v5-data { grid-template-columns: 1fr; gap: .16rem; }
  .v5-data figcaption { font-size: .12rem; }
  .v5-pilot-sub { font-size: .16rem; max-width: none; }
  .v5-goal { font-size: .14rem; margin-top: .20rem; }
}
.v5-int > * { min-width: 0; }
.v5-int .v4-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.v4-logos li { min-width: 0; }
@media (max-width: 1024px) { .v5-int .v4-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v5-int .v4-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.v5-int .v4-logos li { height: .72rem; }
@media (max-width: 1024px) { .v5-int .v4-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } .v5-int .v4-logos li { height: .60rem; } }
/* step 04: the three dashboard views run full width */
.v5-step-wide { grid-template-columns: 1fr; gap: .32rem; }
.v5-step-wide .v5-body { max-width: 6.40rem; }
.v5-data { grid-template-columns: 1fr 1fr; gap: .24rem; }
.v5-data .v5-dash-map { grid-column: 1 / -1; }
.v5-data img { border-radius: .20rem; box-shadow: 0 .14rem .44rem rgba(37, 37, 37, .10); }
@media (max-width: 1024px) { .v5-data { grid-template-columns: 1fr; gap: .14rem; } .v5-data img { border-radius: .12rem; } }