/* Site-wide phone and tablet fixes, loaded last on every page. */
.legal{border-top:1px solid var(--fo-edge,#e2e4ea);padding:20px 0 40px;font-size:12px;color:var(--fo-muted-2,#8a8d99);display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap}
@media (max-width:900px){
  .cs{grid-template-columns:1fr!important;gap:32px}
  .shero-in,.shero-copy{min-width:0;max-width:100%}
  .shero p.lede{max-width:100%;overflow-wrap:anywhere}
}
@media (max-width:760px){
  /* demo tags sit above the card title rather than over it */
  .card .demo-tag{position:static;display:inline-block;margin:0 0 12px}
  .card h3{padding-right:0!important}
  /* the stage-by-stage demo is too small to read on a phone; the stages are set out below it */
  .shero-demo .sd-run{display:none}
  .shero-demo:has(.sd-run){display:none}
  .sd-cap{font-size:12px}
  h1,h2,h3{overflow-wrap:break-word}
}
@media (max-width:560px){
  .sec{padding-top:64px}
  .sitefoot{gap:24px}
}
@media (max-width:900px){
  .shero-in{grid-template-columns:minmax(0,1fr)!important}
  .shero-demo,.shero-demo .sd{min-width:0;max-width:100%}
  .shero-demo *{max-width:100%}
}

@media (max-width:760px){
  /* case cards: the screenshot bleeds to the card edge at the card's own phone padding */
  .card.link .cs-shot{margin:-26px -24px 22px!important}
  .cs-shot .strip,.cs-shot .lbl{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cs-shot .lbl{left:0;right:auto}
  /* closing band: the wall shows above the text and fades behind it */
  .cta{padding:220px 0 64px}
  .cta::before{inset:0;background-position:center top;background-size:auto 360px;background-repeat:repeat-x;opacity:.85;
    -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 62%);mask-image:linear-gradient(180deg,#000 30%,transparent 62%)}
  .cta::after{background:linear-gradient(180deg,rgba(16,16,20,.15) 0,rgba(16,16,20,.55) 30%,var(--fo-night,#101014) 55%)}
  /* film heroes: the copy sits on a dark ground so it reads over the wall */
  .rail .rail-copy{background:linear-gradient(0deg,rgba(15,17,25,.96) 0,rgba(15,17,25,.9) 55%,rgba(15,17,25,0))}
  .rail .rail-ch p{color:rgba(255,255,255,.88)}
}

/* contact and demo pages */
.field .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--fo-muted-2,#8a8d99);margin-left:6px}
.field select{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid var(--fo-edge,#e2e4ea);background:#fff}
.demo-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#0f1119;color:#fff;overflow:hidden}
.demo-card img{display:block;width:100%;height:auto}
.demo-card .k{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8ea2ff;padding:22px 24px 0}
.demo-card b{font-size:20px;font-weight:650;letter-spacing:-.015em;padding:8px 24px 0}
.demo-card span:not(.k){font-size:14px;color:rgba(255,255,255,.7);padding:6px 24px 0;line-height:1.5}
.demo-card em{font-style:normal;font-weight:600;font-size:14px;color:#fff;background:var(--fo-brand,#2742c9);align-self:flex-start;margin:18px 24px 24px;padding:11px 18px}
.demo-see ol{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
.demo-see li{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;font-size:14px;line-height:1.5;color:var(--fo-muted,#6b6f7b)}
.demo-see li img{width:96px;height:72px;object-fit:cover;object-position:top;border:1px solid var(--fo-edge,#e2e4ea)}
.demo-see li b{display:block;color:var(--fo-ink,#111);font-size:15px;margin-bottom:2px}
.demo-shot img{border:1px solid var(--fo-edge,#e2e4ea)}