/* InSpace case studies: shared UI (browser window + anonymized wireframe).
   Used by inspace-use-cases.html (cards) and inspace-case-study.html (detail hero, more stories).
   Needs the page tokens: --line --paper-2 --muted --mono --ink --ease. */
.cardhead{position:relative;height:222px;border-bottom:1px solid var(--line);overflow:hidden;
  background:radial-gradient(120% 95% at 100% 0%,rgba(185,239,163,.42),transparent 56%),radial-gradient(90% 85% at 0% 100%,rgba(133,17,217,.08),transparent 62%),var(--paper-2)}
/* browser */
.shot{padding:22px 22px 0}
.win{height:100%;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(11,11,12,.12);border-bottom:0;border-radius:12px 12px 0 0;
  box-shadow:0 24px 44px -28px rgba(11,11,12,.5);overflow:hidden;transition:transform .5s var(--ease)}
.card.is-click:hover .win{transform:translateY(-4px)}
.win-bar{flex:none;height:30px;display:flex;align-items:center;gap:10px;padding:0 11px;border-bottom:1px solid var(--line)}
.win-dots{display:flex;gap:5px;flex:none}
.win-dots i{width:7px;height:7px;border-radius:50%;background:rgba(11,11,12,.14)}
.win-url{flex:1;min-width:0;height:18px;margin-right:28px;border-radius:99px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;gap:5px;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden}
.win-url svg{width:9px;height:9px;flex:none;opacity:.7}
.win-url .red{display:inline-block;width:58px;height:8px;border-radius:3px;background:rgba(11,11,12,.75)}
.win-view{position:relative;flex:1;overflow:hidden;background:#fff}
.win-view>img.site{position:absolute;left:0;top:0;width:100%;height:auto;transition:transform 2.6s var(--ease)}
.card.is-click:hover .win-view>img.site{transform:translateY(-18%)}
.win-view>img.brand{position:absolute;inset:0;margin:auto;max-width:58%;max-height:46px;object-fit:contain}
/* wireframe for anonymized customers */
.wf{position:absolute;inset:0;padding:11px 14px 0;display:flex;flex-direction:column;gap:9px}
.wf i,.wf .g{display:block;background:rgba(11,11,12,.075);border-radius:5px}
.wf .a{background:var(--acc);border-radius:7px}
.wf .a{position:relative;display:flex;align-items:center;justify-content:center;padding:0 10px}
.wf .ph{font-family:var(--mono);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(11,11,12,.55);text-align:center;line-height:1.4}
[data-acc=g]{--acc:linear-gradient(135deg,#E6F8DC 0%,#B9EFA3 100%)}
[data-acc=v]{--acc:linear-gradient(135deg,#F4ECFC 0%,#DCC6F5 100%)}
.wf-nav{display:flex;align-items:center;gap:8px;flex:none}
.wf-nav b{font-weight:700;font-size:.72rem;letter-spacing:-.01em;color:var(--ink);margin-right:auto;white-space:nowrap}
.wf-nav i{width:20px;height:5px}
.wf-nav .btn{width:34px;height:12px;border-radius:99px;background:var(--ink)}
.wf-hero{flex:1;min-height:0}
.wf-row{display:grid;gap:8px;flex:none;height:44px}
.wf-row.c3{grid-template-columns:repeat(3,1fr)}.wf-row.c4{grid-template-columns:repeat(4,1fr)}
.wf-row>*{height:100%}
.wf-search{flex:none;display:flex;align-items:center;gap:6px;height:26px;padding:0 6px 0 10px;border:1px solid rgba(11,11,12,.12);border-radius:99px}
.wf-search i{flex:1;height:5px}.wf-search .a{width:40px;height:16px;border-radius:99px;flex:none}
.wf-lines{display:flex;flex-direction:column;gap:6px}
.wf-lines .l1{height:9px;width:80%}.wf-lines .l2{height:9px;width:62%}.wf-lines .l3{height:5px;width:88%;margin-top:4px}.wf-lines .l4{height:5px;width:70%}
.wf-lines .btn{width:52px;height:14px;border-radius:99px;background:var(--ink);margin-top:6px}
.wf-split{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}
.wf-split .a{height:100%}
.wf-center{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px}
.wf-center .l1{height:9px;width:60%}.wf-center .l2{height:5px;width:44%}