/* CRM Workspace page additions: the way back to SWYZL & Co., and the screening room.
   CRM Workspace: the screening room. A full walkthrough film between "四次接力" and "楼层导览".
   Uses the CRM page's own tokens (--navy, --amber, --serif, --sans). */
.film{position:relative;background:linear-gradient(180deg,var(--navy) 0%,#0a1324 100%);color:#f5f1df;padding:120px 8% 110px;overflow:hidden}
.film:before{content:'';position:absolute;left:50%;top:44%;width:120vw;height:70vh;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(232,173,72,.12),transparent 70%);pointer-events:none}
.film-heading{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:6%;align-items:end}
.film-heading .eyebrow{color:#e0e9d8}
.film-heading h2{margin:24px 0 0;font-size:clamp(33px,3.45vw,52px)}
.film-heading h2 em{font-style:normal;color:var(--amber)}
.film-heading>p{font:15px/1.9 var(--sans);color:rgba(245,241,223,.72);margin:0 0 10px}
.film-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:26px;margin-top:56px}
.film-screen{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#05080f;box-shadow:0 50px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(245,241,223,.14)}
.film-screen:after{content:'';position:absolute;left:8%;right:8%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.75;pointer-events:none}
.film-video{display:block;width:100%;height:100%;object-fit:cover;background:#05080f}
.film-play{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:14px;padding:10px 22px 10px 10px;border:0;border-radius:999px;background:rgba(14,26,48,.84);color:#fff;font:15px/1.3 var(--sans);text-align:left;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 40px rgba(0,0,0,.35);transition:background .25s,transform .25s}
.film-play:hover{background:rgba(36,77,232,.92);transform:translateY(-2px)}
.film-play-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--amber)}
.film-play-icon:before{content:'';margin-left:4px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent var(--navy)}
.film-play small{display:block;margin-top:3px;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.66)}
.film-sound{position:absolute;right:18px;top:18px;padding:8px 14px;border:1px solid rgba(255,255,255,.3);border-radius:999px;background:rgba(14,26,48,.7);color:#fff;font:12px/1 var(--sans);cursor:pointer}
.film-side{position:relative;min-height:240px}
.film-chapters{position:absolute;inset:0;margin:0;padding:0 4px 0 0;list-style:none;overflow-y:auto;display:grid;align-content:start;gap:3px;scrollbar-width:thin;scrollbar-color:rgba(245,241,223,.25) transparent}
.film-chapters button{position:relative;display:grid;grid-template-columns:52px 1fr;align-items:center;width:100%;padding:11px 14px;border:0;border-radius:10px;background:transparent;color:rgba(245,241,223,.66);font:14px/1.4 var(--sans);text-align:left;cursor:pointer;overflow:hidden;transition:background .2s,color .2s}
.film-chapters button:hover{background:rgba(245,241,223,.06);color:#fff}
.film-chapters button span{font:12px/1 ui-monospace,Menlo,monospace;color:rgba(245,241,223,.45)}
.film-chapters button b{font-weight:500}
.film-chapters button:after{content:'';position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--amber);transform-origin:left;transform:scaleX(var(--p,0));opacity:.85}
.film-chapters button.is-done{color:rgba(245,241,223,.82)}
.film-chapters button.is-active{background:rgba(245,241,223,.09);color:#fff}
.film-chapters button.is-active span{color:var(--amber)}
.film-chapters button:focus-visible,.film-play:focus-visible,.film-sound:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.film-note{position:relative;margin:22px 0 0;font:12px/1.6 var(--sans);letter-spacing:.06em;color:rgba(245,241,223,.5)}
@media (max-width:900px){
  .film{padding:90px 6% 80px}
  .film-heading{grid-template-columns:1fr;gap:12px}
  .film-stage{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:36px}
  .film-side{min-height:0;min-width:0}
  .film-chapters{position:static;grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;overflow-y:hidden;padding-bottom:8px}
  .film-chapters button{grid-template-columns:auto auto;gap:10px;padding:10px 14px}
  .film-play{left:12px;bottom:12px;padding:8px 16px 8px 8px;font-size:13px}
  .film-play-icon{width:38px;height:38px}
}
/* In the CRM page's full-motion mode every scene slides up over the previous one (margin-top:-100svh).
   The film joins that chain: it rises over 四次接力, and its empty bottom run-out is what 楼层导览 slides over. */
html.full #film{z-index:4;margin-top:-100svh;padding-top:calc(120px + 18svh);padding-bottom:calc(110px + 100svh)}
/* The way back to the SWYZL & Co. site, in the header and the footer. */
.site-header .crm-home{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid currentColor;border-radius:999px;font-size:11px;letter-spacing:.04em;white-space:nowrap;opacity:.85;transition:opacity .2s,background .2s,color .2s}
.site-header .crm-home:hover{opacity:1;background:var(--ink);border-color:var(--ink);color:#f5f3ec}
.site-header.dark .crm-home:hover{background:#f5f3ec;border-color:#f5f3ec;color:var(--navy)}
footer nav a{padding:5px 0;font-size:10px}
@media(max-width:600px){.site-header .crm-home{padding:6px 10px;font-size:9px;gap:5px}}
.site-header .crm-lang{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid currentColor;border-radius:999px;font-size:11px;letter-spacing:.12em;line-height:1;opacity:.85;transition:opacity .2s,background .2s,color .2s}
.site-header .crm-lang:hover{opacity:1;background:var(--ink);border-color:var(--ink);color:#f5f3ec}
.site-header.dark .crm-lang:hover{background:#f5f3ec;border-color:#f5f3ec;color:var(--navy)}
@media(max-width:600px){.site-header .crm-lang{padding:6px 9px;font-size:9px}}
html[lang=en] #hero-title{font-size:clamp(36px,3.8vw,58px);letter-spacing:-.02em}