/* DenPods "How it works" (2026-11-03): senecta.ai's Keep watch scene. Full width like the homepage's: above
   1000 px the room is cropped 16:9 and the copy sits on the dark fade at the left, in line with the page's column;
   below, the copy comes first and the room follows. Written by make_keep_watch.py from
   ../agency-preview/2/keep_watch.py: edit those, not this file. */
.kw-section { background: #070B16; }
.kw-section .kw-night { max-width: 1600px; margin: 0 auto; border-radius: 0; }
.kw-copy .eyebrow { color: #7fc4b6; }
.kw-copy h2 { color: #fff; }
.kw-cta { margin-top: 28px; }
.btn-light { background: #fff; color: var(--pine); }
.btn-light:hover { background: var(--mint); color: var(--pine); }
@media (min-width: 1001px) {
  .kw-section .kw-scene { aspect-ratio: 16 / 9; }
  .kw-section .kw-copy { padding-left: max(32px, calc((100% - 1180px) / 2)); }
}
@media (min-width: 1601px) { .kw-section .kw-scene img { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } }
@media (max-width: 1000px) { .kw-section .kw-copy { padding-inline: 32px; } }
@media (max-width: 719px) { .kw-section .kw-copy { padding-inline: 20px; } }  /* the page's gutters */

/* the thread's pieces; kw-r is the wrapper that grows in (a bubble's padding would not collapse) */
.kw-r { display: flex; flex-direction: column; align-items: flex-start; flex: 0 0 auto; overflow: hidden; transform-origin: 0 100%; }
.kw-typing i { width: 8px; height: 8px; border-radius: 50%; background: #8E8E93; animation: kw-bob 1.2s infinite ease-in-out; }
.kw-typing i:nth-child(2) { animation-delay: .15s; } .kw-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes kw-bob { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-3px); opacity: 1; } }
.kw-clip { position: relative; aspect-ratio: 4 / 3; background: #160F2A; }
.kw-sprite { position: absolute; inset: 0; background-image: url(assets/senecta-fall-reenacted-sprite-43.webp?v=f5a97077); background-size: 4300% 100%; background-repeat: no-repeat; animation: kw-sprite 23s infinite; }
.kw-clip-tag { position: absolute; left: 10px; top: 9px; padding: 2px 8px; border-radius: 6px; background: rgba(11,10,20,.55); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.6; }
.kw-call { display: flex; align-items: center; gap: 11px; padding: 10px 16px 10px 10px; border-radius: 20px 20px 20px 6px; background: #E8F7EE; box-shadow: inset 0 0 0 1px #BFEBD0; }
.kw-call-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #16A34A; }
.kw-call-ic svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kw-call b { display: block; color: #14532D; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.kw-call small { display: block; color: #15803D; font-size: 12.5px; line-height: 1.4; }
.kw-ringing { display: inline-flex; }
.kw-ring { width: 9px; height: 9px; margin-left: 4px; border-radius: 50%; background: #16A34A; animation: kw-ring 1.2s ease-out infinite; }
@keyframes kw-ring { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 100% { box-shadow: 0 0 0 10px rgba(22,163,74,0); } }
@media (prefers-reduced-motion: reduce) { .kw-r { animation: none !important; max-height: none; opacity: 1; margin-top: 8px; } .kw-r-typing { display: none; } .kw-sprite { animation: none; background-position: 100% 0; } }

/* the pod in the room at night: the copy on a dark fade, the thread rising from the pod */
.kw-night { display: grid; overflow: hidden; border-radius: 18px; background: #070B16; color: #fff; }
.kw-copy { grid-area: 1 / 1; z-index: 3; align-self: center; width: 41%; padding-left: 5.5%; }
.kw-scene { grid-area: 1 / 1; position: relative; aspect-ratio: 2048 / 1360; margin: 0; container-type: inline-size; }
.kw-scene img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.kw-scene::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7,11,22,.95), rgba(7,11,22,.88) 30%, rgba(7,11,22,.4) 41%, rgba(7,11,22,0) 47%); }
.kw-rings { position: absolute; z-index: 2; left: 55.3%; top: 67%; width: 17.5%; aspect-ratio: 1; translate: -50% -50%; }
.kw-rings i { position: absolute; inset: 0; border: 1.5px solid rgba(255,255,255,.6); border-radius: 50%; opacity: 0; animation: kw-wave 1.5s ease-out infinite; }
.kw-rings i:nth-child(2) { animation-delay: .5s; } .kw-rings i:nth-child(3) { animation-delay: 1s; }
@keyframes kw-wave { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.9); opacity: 0; } }
.kw-say { position: absolute; z-index: 2; left: 47.8%; width: 33cqw; top: 3%; bottom: 43.5%; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
        font-size: clamp(13px, 1.3cqw, 16px); letter-spacing: -.01em; -webkit-mask-image: linear-gradient(transparent, #000 56px); mask-image: linear-gradient(transparent, #000 56px); }
.kw-say .kw-day { color: rgba(255,255,255,.6); font-size: .8em; font-weight: 500; line-height: 1.4; }
.kw-say .kw-bubble, .kw-say .kw-typing { border-radius: 18px 18px 18px 6px; background: rgba(255,255,255,.94); color: #101828; }
.kw-say .kw-bubble { max-width: 100%; padding: .55em .95em; line-height: 1.38; }
.kw-say .kw-typing { display: inline-flex; align-items: center; gap: 5px; height: 2.4em; padding: 0 1em; }
.kw-say .kw-spoken { display: inline-flex; align-items: center; gap: .5em; background: #0B7A66; color: #fff; font-weight: 600; }
.kw-say .kw-spoken svg { flex: 0 0 auto; width: 1.15em; height: 1.15em; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kw-say .kw-clip { width: clamp(180px, 21cqw, 270px); border-radius: 14px; }
.kw-night.is-waiting * { animation-play-state: paused !important; }
@media (max-width: 1000px) {
  .kw-copy { align-self: start; width: auto; padding: 48px 40px 8px; }
  .kw-scene { grid-area: 2 / 1; aspect-ratio: 5 / 4; }
  .kw-scene img { object-position: 81% 50%; }
  .kw-scene::after { background: linear-gradient(#070B16, rgba(7,11,22,0) 14%); }
  .kw-rings { left: 50%; width: 21.5%; }
  .kw-say { left: 40%; right: 6%; width: auto; top: 6%; }
}
@media (max-width: 600px) {
  .kw-copy { padding: 44px 22px 8px; }
  .kw-scene { aspect-ratio: 4 / 5; }
  .kw-scene img { object-position: 61% 50%; }
  .kw-rings { width: 33%; }
  .kw-say { left: 7%; right: 7%; }
}
@media (prefers-reduced-motion: reduce) { .kw-rings { display: none; } }
@keyframes kw-sprite { 0%, 6.09% { background-position: 0% 0; animation-timing-function: steps(42, end); } 28.91%, 100% { background-position: 100% 0; } }
@keyframes kw-d0 { 0%, 4.35% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 5.87%, 97.39% { max-height: 30px; opacity: 1; margin-top: 8px; transform: none; } 98.70%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-d0 { animation: kw-d0 23.0s infinite; }
@keyframes kw-c0 { 0%, 6.09% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 7.61%, 97.39% { max-height: 240px; opacity: 1; margin-top: 8px; transform: none; } 98.70%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-c0 { animation: kw-c0 23.0s infinite; }
@keyframes kw-t1 { 0%, 21.74% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 23.26%, 25.00% { max-height: 48px; opacity: 1; margin-top: 8px; transform: none; } 26.30%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-t1 { animation: kw-t1 23.0s infinite; }
@keyframes kw-m2 { 0%, 25.22% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 26.74%, 97.39% { max-height: 120px; opacity: 1; margin-top: 8px; transform: none; } 98.70%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-m2 { animation: kw-m2 23.0s infinite; }
@keyframes kw-t3 { 0%, 33.04% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 34.57%, 37.17% { max-height: 48px; opacity: 1; margin-top: 8px; transform: none; } 38.48%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-t3 { animation: kw-t3 23.0s infinite; }
@keyframes kw-m4 { 0%, 37.39% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 38.91%, 97.39% { max-height: 120px; opacity: 1; margin-top: 8px; transform: none; } 98.70%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-m4 { animation: kw-m4 23.0s infinite; }
@keyframes kw-t5 { 0%, 47.83% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 49.35%, 50.65% { max-height: 48px; opacity: 1; margin-top: 8px; transform: none; } 51.96%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-t5 { animation: kw-t5 23.0s infinite; }
@keyframes kw-a6 { 0%, 50.87% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 52.39%, 97.39% { max-height: 120px; opacity: 1; margin-top: 8px; transform: none; } 98.70%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-a6 { animation: kw-a6 23.0s infinite; }
@keyframes kw-t7 { 0%, 58.26% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 59.78%, 61.96% { max-height: 48px; opacity: 1; margin-top: 8px; transform: none; } 63.26%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-t7 { animation: kw-t7 23.0s infinite; }
@keyframes kw-m8 { 0%, 62.17% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 63.70%, 97.39% { max-height: 120px; opacity: 1; margin-top: 8px; transform: none; } 98.70%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-m8 { animation: kw-m8 23.0s infinite; }
@keyframes kw-t9 { 0%, 66.52% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 68.04%, 69.35% { max-height: 48px; opacity: 1; margin-top: 8px; transform: none; } 70.65%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-t9 { animation: kw-t9 23.0s infinite; }
@keyframes kw-m10 { 0%, 69.57% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 71.09%, 97.39% { max-height: 120px; opacity: 1; margin-top: 8px; transform: none; } 98.70%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-m10 { animation: kw-m10 23.0s infinite; }
@keyframes kw-c11 { 0%, 73.91% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 75.43%, 97.39% { max-height: 90px; opacity: 1; margin-top: 8px; transform: none; } 98.70%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-c11 { animation: kw-c11 23.0s infinite; }
@keyframes kw-m12 { 0%, 82.61% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } 84.13%, 97.39% { max-height: 120px; opacity: 1; margin-top: 8px; transform: none; } 98.70%, 100% { max-height: 0; opacity: 0; margin-top: 0; transform: translateY(8px) scale(.97); } }
.kw-m12 { animation: kw-m12 23.0s infinite; }
@keyframes kw-rg { 0% { opacity: 0; } 50.87% { opacity: 0; } 51.74% { opacity: 1; } 57.39% { opacity: 1; } 58.26% { opacity: 0; } 82.61% { opacity: 0; } 83.48% { opacity: 1; } 96.52% { opacity: 1; } 97.39% { opacity: 0; } 100% { opacity: 0; } }
.kw-rg { animation: kw-rg 23.0s infinite; }
@keyframes kw-rn { 0% { opacity: 0; } 73.91% { opacity: 0; } 74.78% { opacity: 1; } 82.61% { opacity: 1; } 83.48% { opacity: 0; } 100% { opacity: 0; } }
.kw-rn { animation: kw-rn 23.0s infinite; }
@media (min-width: 1001px) {
  .kw-section .kw-scene img { object-position: 50% 38%; }
  .kw-section .kw-rings { left: 55.4%; top: 66.1%; width: 10%; }
  .kw-section .kw-say { left: 47.9%; top: 4%; bottom: 43.3%; }
}
@media (max-width: 1000px) {
  .kw-section .kw-scene img { object-position: 82% 50%; }
  .kw-section .kw-scene { overflow: hidden; }
  .kw-section .kw-scene img { top: 3%; }
  .kw-section .kw-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(#070B16 3%, rgba(7,11,22,0) 13%); }
  .kw-section .kw-rings { left: 49.9%; top: 64.8%; width: 12%; }
  .kw-section .kw-say { left: 39.9%; right: 6%; top: 6%; bottom: 43.2%; }
}
@media (max-width: 600px) {
  .kw-section .kw-scene img { object-position: 62% 50%; }
  .kw-section .kw-rings { left: 49.6%; width: 18.8%; }
  .kw-section .kw-say { left: 7%; right: 7%; }
}