/* ===== FindSoftEasy (/work/findsofteasy/) =====
   Phones: a section's bullet list stays with its copy, above the scene window (site.css puts .col children after it).
   The work (round Q2, the owner: "do not apply any filters and just show the screenshots"): their screens as they are,
   in plain frames. A large lead screen, a 2 x 2 grid of desktop screens (all 16:10), then a row of three phone screens
   (all 390 x 844). Each frame is a link to the full-size file; pages/findsofteasy.js turns it into a lightbox (JS off:
   the link opens the image). Phones: one screen per row, full width. Captions 14 px+, numbered. */
@media (max-width:860px){ body[data-page="findsofteasy"] .col>.pts{order:3} }
body[data-page="findsofteasy"] .sub2{margin-top:14px}
body[data-page="findsofteasy"] .col>.lede+.lede{margin-top:14px}
.fse-intro{margin-top:18px}
.fse-g{margin-top:34px}
.fse-f{margin:0;border:1px solid #2A2A2A;background:#0B0B0B;transition:border-color .2s}
.fse-f:hover,.fse-f:focus-within{border-color:#5A5A5A}
.fse-lk{display:block;position:relative;cursor:zoom-in;overflow:hidden;outline-offset:-3px}
.fse-lk img{display:block;width:100%;height:auto;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fse-f:hover .fse-lk img{transform:scale(1.015)}
.fse-lk::after{content:"open +";position:absolute;right:10px;bottom:10px;padding:6px 9px;font:600 12px/1 var(--mono);color:var(--fg);background:#050505;
  border:1px solid #3A3A3A;opacity:0;transition:opacity .2s}
.fse-f:hover .fse-lk::after,.fse-lk:focus-visible::after{opacity:1}
.fse-f figcaption{display:flex;gap:.8em;padding:11px 14px 13px;border-top:1px solid #2A2A2A;font-size:14px;line-height:1.55;color:var(--fg2)}
.fse-f figcaption b{flex:none;font-weight:600;color:var(--mute)}
.fse-grid{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.fse-grid>li,.fse-ph>li{display:flex}
.fse-grid .fse-f,.fse-ph .fse-f{flex:1;display:flex;flex-direction:column}
.fse-grid figcaption,.fse-ph figcaption{flex:1}
.fse-sub{margin-top:40px;color:var(--mute)}
.fse-ph{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:880px}
@media (max-width:860px){
  .fse-grid,.fse-ph{grid-template-columns:1fr;gap:18px;max-width:none}
  .fse-sub{margin-top:30px}
  .fse-f figcaption{font-size:15px}
}
/* the lightbox */
.fse-lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--fg)}
.fse-lb::backdrop{background:rgba(5,5,5,.94)}
.fse-lb[open]{display:flex;flex-direction:column;align-items:center;justify-content:center}
.fse-lb-in{position:relative;display:flex;flex-direction:column;align-items:center;max-width:min(1440px,calc(100vw - 32px))}
.fse-lb img{display:block;max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto;border:1px solid #2A2A2A;background:#FFFFFF}
.fse-lb p{margin-top:12px;font-size:14px;line-height:1.5;color:var(--fg2);text-align:center;max-width:60em}
.fse-lb-bar{position:fixed;top:12px;right:12px;display:flex;gap:8px}
.fse-lb button{min-width:44px;min-height:44px;padding:0 12px;font:600 13px/1 var(--mono);color:var(--fg);background:#0B0B0B;border:1px solid #3A3A3A;cursor:pointer}
.fse-lb button:hover,.fse-lb button:focus-visible{border-color:var(--fg);outline:0}
@media (prefers-reduced-motion:reduce){ .fse-lk img,.fse-f{transition:none} .fse-f:hover .fse-lk img{transform:none} }
/* round Q3: the pull line above "Talk to us" */