/* Animated product clips in the Clearly Digital app's look (navy header on a light ground; navy office sidebar). Everything is drawn in HTML with made-up crew and records - never real people's data. */
.clip { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.clip-stage { display: flex; align-items: flex-end; justify-content: center; gap: 18px; flex-wrap: wrap; position: relative; }
.clip-caption {
  min-height: 3.2em; max-width: 520px; text-align: center; font-weight: 600; color: var(--ink);
  font-size: 0.98rem; line-height: 1.45; transition: opacity 0.25s;
}
.clip-caption .stepno { font-family: var(--mono); font-size: 0.74rem; color: var(--steel); display: block; margin-bottom: 2px; letter-spacing: 0.08em; }
.clip-dots { display: flex; gap: 5px; }
.clip-dots i { width: 6px; height: 6px; border-radius: 9px; background: var(--line-strong); transition: background 0.2s, width 0.2s; }
.clip-dots i.on { background: var(--blue-bright); width: 16px; }
.clip-replay { border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); border-radius: 999px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.clip-replay:hover { color: var(--white); border-color: var(--blue-light); }

/* ---- Phone (Hi-Sky field app) ---- */
.hs-phone {
  width: 252px; flex: 0 0 auto; border-radius: 36px; padding: 10px; position: relative;
  background: #050b16; border: 1px solid #22324d;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #0f1a2c;
}
.hs-phone::before { content: ''; position: absolute; top: 16px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 12px; background: #050b16; z-index: 3; }
.hs-screen {
  position: relative; border-radius: 27px; overflow: hidden; height: 500px;
  background: #EFF3F8; color: #16212E; font: 500 12.5px/1.35 'Inter', system-ui, sans-serif;
  display: flex; flex-direction: column;
}
.hs-screen .frame { position: absolute; inset: 0; display: flex; flex-direction: column; transition: opacity 0.35s ease; }
.hs-screen .frame.out { opacity: 0; }
.hs-hd { background: #0f2340; color: #fff; padding: 40px 14px 12px; }
.hs-hd .row1 { display: flex; align-items: center; gap: 8px; }
.hs-hd .back { color: rgba(255,255,255,0.84); font-size: 12px; font-weight: 700; }
.hs-hd .t { font-weight: 800; font-size: 16px; letter-spacing: 0.01em; }
.hs-hd .s { color: rgba(255,255,255,0.84); font-size: 11px; margin-top: 2px; }
.hs-hd .lens { width: 26px; height: 26px; flex: 0 0 auto; stroke: #60a5fa; stroke-width: 2.6; fill: none; stroke-linecap: round; }
.hs-sync { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 3px 8px; border-radius: 99px; background: rgba(255,255,255,0.14); font-size: 10px; font-weight: 700; }
.hs-sync i { width: 7px; height: 7px; border-radius: 50%; background: #f5b544; }
.hs-sync.ok i { background: #45d07f; }
.hs-bd { padding: 10px; display: grid; gap: 8px; align-content: start; flex: 1; overflow: hidden; }
.hs-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: 0.09em; color: #5A6A79; text-transform: uppercase; margin-top: 2px; }
.hs-card { background: #fff; border: 1px solid #DFE6EF; border-radius: 13px; padding: 10px 11px; display: flex; align-items: center; gap: 9px; }
.hs-card .g { flex: 1; min-width: 0; }
.hs-card .a { font-weight: 700; font-size: 12.5px; color: #16212E; }
.hs-card .b { color: #5A6A79; font-size: 11px; margin-top: 1px; }
.hs-card.hl { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18); }
.hs-pill { font-size: 9.5px; font-weight: 800; border-radius: 99px; padding: 3px 8px; white-space: nowrap; }
.hs-pill.red { background: #FBE4E7; color: #A4161A; }
.hs-pill.amber { background: #FDF0D8; color: #8A5A12; }
.hs-pill.green { background: #DDF3E6; color: #17784A; }
.hs-pill.grey { background: #E9EEF5; color: #5A6A79; }
.hs-pill.maroon { background: #0f2340; color: #fff; }
.hs-btn { background: #2563eb; color: #fff; border-radius: 11px; padding: 11px; text-align: center; font-weight: 800; font-size: 12.5px; }
.hs-btn.alt { background: #fff; color: #2563eb; border: 1px solid #bfd3f7; }
.hs-btn.green { background: #1E9E5A; }
.hs-check { width: 18px; height: 18px; border-radius: 6px; border: 2px solid #C9D3DF; flex: 0 0 auto; display: grid; place-items: center; background: #fff; }
.hs-check.on { background: #1E9E5A; border-color: #1E9E5A; }
.hs-check.on::after { content: ''; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.hs-check.bad { background: #A4161A; border-color: #A4161A; }
.hs-check.bad::after { content: '!'; color: #fff; font-weight: 900; font-size: 11px; }
.hs-sig { height: 70px; background: #fff; border: 1px dashed #C9D3DF; border-radius: 12px; position: relative; }
.hs-sig svg { position: absolute; inset: 8px 12px; width: calc(100% - 24px); height: calc(100% - 16px); stroke: #111; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.hs-sig.draw svg path { stroke-dasharray: 600; stroke-dashoffset: 600; animation: hsdraw 1.5s ease forwards; }
@keyframes hsdraw { to { stroke-dashoffset: 0; } }
.hs-photo { height: 64px; border-radius: 10px; background: linear-gradient(135deg, #5d6b55, #8a9a72 45%, #3f4a39); position: relative; overflow: hidden; }
.hs-photo::after { content: ''; position: absolute; left: 30%; top: 25%; width: 40%; height: 45%; border: 2px solid #ffcf3f; border-radius: 50%; }
.hs-toast { position: absolute; left: 12px; right: 12px; bottom: 16px; background: #16212E; color: #fff; border-radius: 12px; padding: 10px 12px; font-weight: 700; font-size: 11.5px; display: flex; gap: 8px; align-items: center; animation: hsup 0.35s ease; z-index: 4; }
.hs-toast i { width: 9px; height: 9px; border-radius: 50%; background: #45d07f; flex: 0 0 auto; }
.hs-toast.wait i { background: #f5b544; }
@keyframes hsup { from { transform: translateY(20px); opacity: 0; } }
.hs-banner { border-radius: 11px; padding: 9px 11px; font-weight: 700; font-size: 11.5px; }
.hs-banner.red { background: #A4161A; color: #fff; }
.hs-banner.amber { background: #FDF0D8; color: #8A5A12; }
.hs-big { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; color: #16212E; }
.hs-tabbar { display: flex; justify-content: space-around; padding: 8px 6px 14px; background: #fff; border-top: 1px solid #DFE6EF; font-size: 9.5px; font-weight: 700; color: #5A6A79; }
.hs-tabbar b { color: #2563eb; }
.hs-scan { flex: 1; background: #1a1f1a; position: relative; display: grid; place-items: center; }
.hs-scan .box { width: 130px; height: 130px; border: 3px solid #fff; border-radius: 16px; position: relative; background:
  repeating-linear-gradient(90deg, #111 0 6px, #fff 6px 9px, #111 9px 12px, #fff 12px 18px); opacity: 0.92; }
.hs-scan .box::after { content: ''; position: absolute; left: -3px; right: -3px; height: 3px; background: #ff4d5e; top: 0; animation: hsscan 1.4s ease-in-out infinite alternate; }
@keyframes hsscan { to { top: calc(100% - 3px); } }
.hs-scan .lbl { position: absolute; bottom: 18px; color: #fff; font-weight: 700; font-size: 11.5px; }

/* The offline map */
.hs-map { flex: 1; position: relative; overflow: hidden; background: repeating-linear-gradient(45deg, #d9e7c9 0 14px, #d1e0c0 14px 28px); }
.hs-map svg.base { position: absolute; inset: 0; width: 100%; height: 100%; }
.hs-map .dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #2563eb; border: 3px solid #fff; box-shadow: 0 0 0 9px rgba(37, 99, 235, 0.22); transition: left 1.6s linear, top 1.6s linear; z-index: 2; }
.hs-map .chip { position: absolute; left: 10px; top: 10px; background: #16212E; color: #fff; border-radius: 8px; padding: 5px 8px; font-size: 10.5px; font-weight: 700; z-index: 2; }
.hs-map .acc { position: absolute; right: 10px; bottom: 10px; background: #fff; border-radius: 8px; padding: 5px 8px; font-size: 10.5px; font-weight: 800; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 2; }
.hs-map .alert { position: absolute; left: 10px; right: 10px; top: 44px; z-index: 3; animation: hsup 0.35s ease; }

/* Tap ripple */
.tap { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid rgba(255, 207, 63, 0.95); background: rgba(255, 207, 63, 0.25); pointer-events: none; z-index: 6; animation: tap 0.9s ease-out forwards; }
@keyframes tap { 0% { transform: scale(0.3); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---- Office (Hi-Sky web dashboard) ---- */
.hs-desk {
  width: 100%; max-width: 640px; border-radius: 14px; overflow: hidden; border: 1px solid #22324d; position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); background: #F3F5F8; color: #16212E; font: 500 11.5px/1.35 'Inter', system-ui, sans-serif;
}
.hs-desk .chrome { background: #1b2433; padding: 7px 10px; display: flex; gap: 6px; align-items: center; }
.hs-desk .chrome i { width: 9px; height: 9px; border-radius: 50%; background: #3a465a; }
.hs-desk .chrome span { margin-left: 10px; background: #263246; color: #9fb0c8; border-radius: 6px; padding: 3px 10px; font-size: 10.5px; flex: 1; }
.hs-desk .wrapd { display: grid; grid-template-columns: 118px 1fr; height: 330px; }
.hs-side { background: linear-gradient(180deg, #0f2340, #0a1628); color: #b9c8de; padding: 10px 8px; display: grid; gap: 4px; align-content: start; font-size: 10.5px; font-weight: 700; }
.hs-side .lens { display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 800; font-size: 11.5px; padding: 2px 4px 10px; }
.hs-side .lens svg { width: 20px; height: 20px; stroke: #60a5fa; stroke-width: 2.6; fill: none; stroke-linecap: round; }
.hs-side div { padding: 6px 8px; border-radius: 7px; }
.hs-side .on { background: #2563eb; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.hs-main { position: relative; overflow: hidden; }
.hs-main .frame { position: absolute; inset: 0; padding: 12px; display: grid; gap: 9px; align-content: start; transition: opacity 0.35s ease; }
.hs-main .frame.out { opacity: 0; }
.hs-crumb { font-size: 10px; color: #5A6A79; font-weight: 700; letter-spacing: 0.06em; }
.hs-crumb b { color: #16212E; letter-spacing: 0; font-size: 12.5px; margin-left: 4px; }
.hs-hero { background: linear-gradient(90deg, #0f2340, #1e3a6e); color: #fff; border-radius: 10px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; }
.hs-hero .t { font-weight: 800; font-size: 13px; }
.hs-hero .s { color: rgba(255,255,255,0.8); font-size: 10px; }
.hs-hero .sp { flex: 1; }
.hs-hero .b { background: #fff; color: #0f2340; border-radius: 7px; padding: 5px 9px; font-weight: 800; font-size: 10.5px; }
.hs-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.hs-tile { background: #fff; border: 1px solid #E1E6EE; border-radius: 9px; padding: 7px 8px; }
.hs-tile b { display: block; font-size: 17px; font-weight: 900; }
.hs-tile span { color: #5A6A79; font-size: 9.5px; font-weight: 700; }
.hs-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.hs-chip { border: 1px solid #E1E6EE; background: #fff; border-radius: 99px; padding: 3px 9px; font-size: 10px; font-weight: 700; }
.hs-chip.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.hs-row { background: #fff; border: 1px solid #E1E6EE; border-radius: 9px; padding: 7px 10px; display: flex; align-items: center; gap: 8px; }
.hs-row .g { flex: 1; min-width: 0; }
.hs-row .a { font-weight: 800; font-size: 11.5px; }
.hs-row .b { color: #5A6A79; font-size: 10px; }
.hs-row.new { animation: hsin 0.5s ease; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14); }
@keyframes hsin { from { transform: translateY(-8px); opacity: 0; } }
.hs-dbtn { background: #2563eb; color: #fff; border-radius: 8px; padding: 8px; text-align: center; font-weight: 800; font-size: 11px; }
.hs-dbtn.ghost { background: #fff; color: #2563eb; border: 1px solid #bfd3f7; }
.hs-bars { display: flex; gap: 4px; align-items: flex-end; height: 64px; }
.hs-bars div { flex: 1; background: #93b4f5; border-radius: 3px 3px 0 0; }
.hs-bars div.gap { background: #f1c25b; }
.hs-pages { position: relative; height: 120px; }
.hs-pages div { position: absolute; width: 92px; height: 118px; background: #fff; border: 1px solid #d5dbe5; border-radius: 4px; box-shadow: 0 6px 16px rgba(0,0,0,0.12); padding: 8px; font-size: 8px; color: #5A6A79; animation: hsin 0.5s ease both; }
.hs-pages div::before { content: ''; display: block; height: 6px; width: 60%; background: #0f2340; border-radius: 3px; margin-bottom: 6px; }
.hs-pages div::after { content: ''; display: block; height: 60px; background: repeating-linear-gradient(0deg, #e8ecf2 0 3px, transparent 3px 8px); }
.hs-livemap { height: 150px; border-radius: 10px; position: relative; overflow: hidden; background: repeating-linear-gradient(45deg, #dfe9d3 0 12px, #d7e3ca 12px 24px); border: 1px solid #E1E6EE; }
.hs-livemap i { position: absolute; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: #2563eb; box-shadow: 0 1px 4px rgba(0,0,0,0.3); transition: left 2s linear, top 2s linear; }
.hs-livemap i.t { background: #2563eb; }

@media (max-width: 600px) {
  .hs-phone { width: 232px; }
  .hs-screen { height: 460px; }
  .hs-desk .wrapd { grid-template-columns: 1fr; }
  .hs-side { display: none; }
  .hs-tiles { grid-template-columns: repeat(2, 1fr); }
  .clip-stage .hs-desk + .hs-phone, .clip-stage .hs-phone + .hs-desk { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .hs-sig.draw svg path { animation: none; stroke-dashoffset: 0; }
  .tap, .hs-toast, .hs-row.new, .hs-pages div, .hs-map .alert { animation: none; }
  .hs-map .dot, .hs-livemap i { transition: none; }
}

/* The office frame's sidebar is filled per step; the slot itself stays out of the grid. */
.hs-side-slot { display: contents; }
/* Clips fit the screen they are shown on: shorter windows get shorter devices. */
.hs-screen { height: clamp(330px, 54vh, 500px); }
.hs-desk .wrapd { height: clamp(230px, 40vh, 330px); }
.clip-foot { display: flex; align-items: center; gap: 12px; }
/* Phone + office side by side. */
.clip-stage.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; width: 100%; }
@media (max-width: 980px) { .clip-stage.duo { grid-template-columns: 1fr; justify-items: center; } }
.split.wide { grid-template-columns: 0.75fr 1.25fr; }
@media (max-width: 860px) { .split.wide { grid-template-columns: 1fr; } }

/* ---- Screen-recording clips (demo.js) ---- */
.rec .hs-screen { overflow: hidden; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: #EFF3F8; transition: transform 0.4s ease, opacity 0.4s ease; }
.scr.from-right { transform: translateX(100%); }
.scr.from-left { transform: translateX(-30%); opacity: 0; }
.scr.to-left { transform: translateX(-30%); opacity: 0; }
.scr.to-right { transform: translateX(100%); }
.scr.gone { opacity: 0; }
.scr-body { flex: 1; overflow: hidden; position: relative; }
.scr-inner { padding: 10px; display: grid; gap: 8px; transition: transform 0.7s ease; }
.hs-tabbar span.on { color: #2563eb; font-weight: 800; }
.hs-card, .ppe, .addphoto, .hs-btn, .hs-tabbar span, .fv { transition: transform 0.12s ease, background 0.2s, border-color 0.2s, box-shadow 0.2s; }
.pressed { transform: scale(0.97); }
.hs-card.hz.on { border-color: #1E9E5A; background: #f2fbf6; }
.hs-card.hz.on .hs-check { background: #1E9E5A; border-color: #1E9E5A; }
.hs-card.hz.on .hs-check::after { content: ''; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.fld { background: #fff; border: 1px solid #DFE6EF; border-radius: 12px; padding: 8px 11px; }
.fl { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; color: #5A6A79; text-transform: uppercase; }
.fv { font-weight: 700; font-size: 12.5px; color: #16212E; min-height: 17px; margin-top: 2px; }
.fv:empty::before { content: attr(data-ph); color: #9aa8b8; font-weight: 500; }
.fv.typing { border-bottom: 2px solid #2563eb; }
.fv.typing::after { content: ''; display: inline-block; width: 1.5px; height: 13px; background: #2563eb; margin-left: 1px; vertical-align: -2px; animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ppes, .crew { display: flex; flex-wrap: wrap; gap: 6px; }
.ppe { border: 1px solid #DFE6EF; background: #fff; border-radius: 99px; padding: 6px 11px; font-weight: 700; font-size: 11.5px; color: #5A6A79; }
.ppe.on { background: #2563eb; border-color: #2563eb; color: #fff; }
.addphoto { height: 64px; border: 1.5px dashed #b8c6d8; border-radius: 12px; display: grid; place-items: center; color: #2563eb; font-weight: 800; font-size: 12px; background: #fff; }
.addphoto.has { border: 0; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.6); align-items: end; justify-items: start; padding: 6px 8px; background: linear-gradient(135deg, #5d6b55, #8a9a72 45%, #3f4a39); position: relative; }
.addphoto.has::after { content: ''; position: absolute; left: 34%; top: 14%; width: 34%; height: 50%; border: 2px solid #ffcf3f; border-radius: 50%; }
.sigmeta { font-size: 10px; color: #5A6A79; font-weight: 600; }
.rec .hs-sig svg path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }

/* The fingertip */
.finger {
  position: absolute; left: 70%; top: 85%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.35); border: 2px solid rgba(15, 35, 64, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  opacity: 0; z-index: 9; pointer-events: none;
  transition-property: left, top, transform, opacity, background; transition-timing-function: cubic-bezier(.4, .1, .3, 1);
}
.finger.on { opacity: 1; }
.finger.down { transform: scale(0.78); background: rgba(37, 99, 235, 0.45); }
@media (prefers-reduced-motion: reduce) { .scr, .scr-inner { transition: none; } }

/* Office screens in recording clips */
.rec .hs-desk .wrapd { position: relative; display: block; overflow: hidden; }
.scr.desk { display: grid; grid-template-columns: 118px 1fr; background: #F3F5F8; }
.scr.desk .dmain { display: flex; flex-direction: column; min-width: 0; }
.scr.desk .scr-inner { padding: 12px; gap: 9px; }
.dlist { display: grid; gap: 7px; }
.hs-side div[data-k] { transition: background 0.2s; }
.finger.cursor { width: 22px; height: 22px; margin: -3px 0 0 -4px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.finger.cursor svg { width: 22px; height: 22px; fill: #fff; stroke: #0f2340; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)); }
.finger.cursor.down { transform: scale(0.88); background: none; }
.scr.desk .hs-toast { left: 130px; }
@media (max-width: 600px) { .scr.desk { grid-template-columns: 1fr; } .scr.desk .hs-side { display: none; } .scr.desk .hs-toast { left: 12px; } }
/* Pre-trip defect */
.defbtn { font-size: 10px; font-weight: 800; color: #A4161A; border: 1px solid #f3c4c2; border-radius: 99px; padding: 4px 9px; background: #fff; }
.hs-card.hz.bad { border-color: #A4161A; background: #fff6f6; }
.hs-card.hz.bad .hs-check { background: #A4161A; border-color: #A4161A; }
.hs-card.hz.bad .defbtn { background: #A4161A; color: #fff; }
.defbox { display: none; gap: 8px; padding: 8px; border-radius: 12px; background: #fff6f6; border: 1px dashed #f3c4c2; }
.defbox.open { display: grid; }
.ppe[data-k="oos"].on { background: #A4161A; border-color: #A4161A; }
.addphoto.ticket { background: linear-gradient(135deg, #f7f3e8, #e8e0c8); color: #16212E; text-shadow: none; }
.addphoto.ticket::after { border-color: #2563eb; border-radius: 6px; left: 12%; top: 18%; width: 76%; height: 56%; }
.new-in { animation: hsin 0.5s ease; border-color: #1E9E5A; }
/* Captions read like subtitles ABOVE the devices, so the bottom controls can never cover them. */
.clip .clip-caption { order: -1; min-height: 2.9em; display: flex; align-items: flex-end; justify-content: center; }
.clip .clip-foot { order: 2; }
/* A lone office window takes the clip's full width (it used to shrink to its content). */
.clip { align-self: stretch; width: 100%; }
.clip-stage { width: 100%; }
.clip-stage > .hs-desk { flex: 1 1 auto; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* THE PHONE FILLS THE SCREEN (Jeff 2026-10-08: "make it a bit larger, remove the padding"). Its height
   follows the window so the whole device always fits in view, as large as the screen allows. */
.rec { --sh: clamp(380px, calc(100vh - 230px), 700px); }
.rec .clip-stage.duo { --sh: clamp(340px, calc(100vh - 330px), 600px); }
.rec .hs-screen { height: var(--sh); }
.rec .hs-phone { width: calc(var(--sh) * 0.5 + 24px); max-width: 100%; }
.rec .hs-desk .wrapd { height: calc(var(--sh) * 0.72); }
.rec .clip-stage:not(.duo) .hs-desk .wrapd { height: clamp(300px, calc(100vh - 290px), 520px); }
.rec .clip-caption { min-height: 2.6em; font-size: 1rem; }
.rec .clip-foot { margin-top: -2px; }
@media (max-width: 600px) { .rec { --sh: clamp(380px, calc(100vh - 250px), 600px); } }
.rec .clip-stage.duo { --sh: clamp(300px, calc(100vh - 360px), 600px); }
/* A slide with an intro line under its heading gives the devices a little less height. */
.wrap:has(> .lead) .rec .clip-stage.duo { --sh: clamp(280px, calc(100vh - 420px), 560px); }
.rec .hs-phone { min-width: 226px; }