/* site v7: the home page only (loaded after v7.css). Every rule sits under body.v7. */

/* the results band: the headline, the label, two cards, the one line and the chat */
.v7 .results h2 { max-width: 900px; margin-bottom: 40px; }
.v7 .fig-pair-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.v7 .results .fig-pair-row { gap: 24px; }
.v7 .results .res-label { margin: 0 0 20px; }
.v7 .results .k2-line { margin: 40px 0 0; }
.v7 .fig-card { background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 16px; padding: 28px 32px 32px; }
.v7 .fig-card .rev-h, .v7 .fig-card .fig-line { color: var(--ink); }
.v7 .fig-card .bar-bg { fill: var(--rule); }
.v7 .fig-card .bar-fill { fill: var(--marine); }

/* the chat illustration: our own generic app frame with its OWN light surface; no logo, no product colour, no font of any assistant, no image */
.v7 .results .chat { display: flex; flex-direction: column; gap: 14px; background: #fff; color: var(--ink); border: 1px solid var(--rule); border-radius: 16px; padding: 0 0 24px;
  max-width: 560px; margin: 0; overflow: hidden; box-shadow: 0 0 0 6px var(--ink-2); }
.v7 .res-bottom { margin-top: 56px; }
.v7 .res-bottom .k2-line { margin: 0 0 48px; max-width: none; }
@media (min-width: 1024px) {
  .v7 .res-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: 56px; align-items: center; }
  .v7 .res-bottom .k2-line { margin: 0; }
}
.v7 .chat-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--stone); border-bottom: 1px solid var(--rule); }
.v7 .chat-mark { width: 28px; height: 28px; flex: none; }
.v7 .chat-who { margin: 0; font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); }
.v7 .chat-row { display: flex; align-items: flex-start; gap: 10px; padding: 0 20px; }
.v7 .chat-me { justify-content: flex-end; }
.v7 .chat-row .chat-mark { margin-top: 6px; width: 24px; height: 24px; }
.v7 .chat-msg { margin: 0; padding: 12px 16px; border-radius: 16px; font-size: 17px; line-height: 25px; font-weight: 400; max-width: 86%; }
.v7 .chat-me .chat-msg { background: var(--marine); color: #fff; border-bottom-right-radius: 4px; }
.v7 .chat-ai .chat-msg { background: var(--stone); color: var(--ink); border-bottom-left-radius: 4px; }
/* v7r7 (10-26 ruling): the caption under the frame, on the ink band; the frame's 6 px ring leaves a 10 px gap at a 16 px margin */
.v7 .chat-fig { margin: 0; min-width: 0; }
.v7 .chat-cap { margin: 16px 0 0; font-size: 15px; line-height: 23px; font-weight: 400; color: var(--soft); max-width: 560px; }

/* the video's play control and the transcript under the video */
.v7 .hero-vcol { grid-area: v; align-self: center; min-width: 0; }
.v7 .hero-vcol .transcript { margin: 16px 0 0; }
.v7 .hero-video { position: relative; }
.v7 .video-play { display: none; }
.v7 .hero-video.js-on:not(.started) .video-play { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 56px; width: 100%; background: transparent; border: 0; padding: 0; cursor: pointer; }
.v7 .hero-video .video-play:focus-visible { outline: 3px solid var(--marine-lt); outline-offset: -6px; }

/* the reading chips of the report band and the how-we-check band; the report band's chip keeps 24 px above the delivery sentence */
.v7 .reading > .chip { display: inline-flex; max-width: 420px; margin-top: 8px; }
.v7 #what-in-report .reading > .chip { margin-bottom: 24px; }

/* the closing band: a display line and the form itself */
.v7 .close { text-align: center; }
.v7 .close-line { max-width: 900px; margin: 0 auto; font-size: 56px; line-height: 62px; }
.v7 .close .join { margin: 32px auto 0; text-align: left; }
.v7 .close .join label, .v7 .close .join-lead { color: var(--paper); }
.v7 .close .join-more summary { color: var(--marine-lt); }
.v7 .close .join-more summary::after { border-color: var(--marine-lt); }   /* cut1: item 18 now reads this chevron (the transcript's summary, which it read before, is gone): the light marine of its label on the dark close */
.v7 .close .field { color: var(--slate); }

@media (max-width: 600px) {
  .v7 .results .fig-pair-row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v7 .fig-card { padding: 22px 22px 26px; }
  .v7 .res-bottom { margin-top: 40px; }
  .v7 .chat-msg { max-width: 92%; }
  .v7 .close-line { font-size: 34px; line-height: 40px; }
}