/* Product scenes: short animated stories of each product, used on the Work page panel (on hover) and in the case
   study headers (on load). Built in HTML; behaviour in assets/js/scenes.js. Each scene plays once and rests on its
   last frame. With reduced motion, the last frame shows straight away. */

/* the soft "screen glow" ground: the product's own screen, blurred, washed with the product colour */
.sc-bg { position: absolute; inset: 0; overflow: hidden; background: #141212; opacity: 0; transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.sc-bg.is-on, .sc-bg--always { opacity: 1; }
.sc-bg img { position: absolute; inset: -20%; width: 140%; height: 140%; object-fit: cover; filter: blur(48px) saturate(1.4); opacity: .7; transform: scale(1.1); }
.sc-bg .sc-tint { position: absolute; inset: 0; background: radial-gradient(70% 60% at 30% 30%, var(--tint, transparent), transparent 70%), radial-gradient(60% 60% at 80% 85%, var(--tint, transparent), transparent 70%); opacity: .6; }
.sc-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 70% at 50% 50%, rgba(20, 18, 18, .15), rgba(20, 18, 18, .6)); opacity: .7; }

/* the stage a scene is drawn on; the scene scales to fit it */
.sc-host { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; overflow: hidden; opacity: 0; transition: opacity 250ms cubic-bezier(0.23, 1, 0.32, 1); pointer-events: none; }
.sc-host.is-on, .sc-host--always { opacity: 1; }
.sc-root { position: absolute; left: 50%; top: 50%; flex: none; transform-origin: center; text-align: left; }

/* ---------- Ely: the chat window, rebuilt from the shipped screens ---------- */
.sc-ely { width: 380px; height: 560px; border-radius: 20px; background: #fff; color: #222; font-family: Arial, "Helvetica Neue", sans-serif; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); display: flex; flex-direction: column; overflow: hidden; clip-path: inset(0 0 0 0 round 20px); }
.sc-ely__bar { flex: none; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 0 20px; background: #00507A; color: #fff; font-size: 22px; }
.sc-ely__bar b { font-size: 21px; }
.sc-ely__bar span { transition: opacity 200ms ease; }
.sc-ely__log { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 14px; overflow: hidden; }
.sc-ely__log > * { flex: none; }
.sc-m { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.sc-m > span { padding: 11px 13px; border-radius: 12px; background: #EDEDED; font-size: 15px; line-height: 1.35; }
.sc-m.u { align-self: flex-end; }
.sc-m.u > span { background: #00507A; color: #fff; }
.sc-av { flex: none; width: 28px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #BFE3F5 0 38%, #5BB3DE 39%); position: relative; }
.sc-av::before, .sc-av::after { content: ""; position: absolute; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #123; }
.sc-av::before { left: 9px; } .sc-av::after { right: 9px; }
.sc-w { display: inline-block; }
.sc-menu { align-self: flex-start; width: 84%; margin-left: 36px; border: 1.5px solid #8A8A8A; border-radius: 14px; overflow: hidden; }
.sc-menu p { margin: 0; padding: 12px 16px; border-top: 1px solid #B5B5B5; color: #00507A; font-weight: 700; font-size: 16px; transition: background-color 160ms ease, color 160ms ease; }
.sc-menu p:first-child { border-top: 0; }
.sc-menu p.tap { background: #00507A; color: #fff; }
.sc-ely__in { flex: none; display: flex; justify-content: space-between; padding: 13px 16px; background: #F2F2F2; color: #8A8A8A; font-size: 14px; }
.sc-ely__ft { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-top: 1px solid #ddd; font-size: 12px; font-weight: 700; color: #00507A; }
.sc-ely__ft .lang { display: flex; border: 1.5px solid #00507A; border-radius: 6px; overflow: hidden; }
.sc-ely__ft .lang i { font-style: normal; padding: 3px 7px; } .sc-ely__ft .lang i:first-child { background: #00507A; color: #fff; }
.sc-ely__ft .home { padding: 3px 7px; border: 1.5px solid #00507A; border-radius: 6px; }

/* ---------- Digital Enrolment: the member list fills in, generic data ---------- */
.sc-en { width: 560px; height: 470px; border-radius: 22px; background: #fff; color: #1F2A33; font-family: "Hanken Grotesk", system-ui, sans-serif; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); padding: 26px 28px 24px; display: flex; flex-direction: column; clip-path: inset(0 0 0 0 round 22px); }
.sc-en__top { display: flex; justify-content: space-between; align-items: baseline; }
.sc-en__top b { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.sc-en__top span { font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; color: #6E6A66; transition: opacity 200ms ease; }
.sc-en__file { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: 14px; padding: 7px 12px; border-radius: 999px; background: #E3F0F8; color: #14496B; font-size: 14px; font-weight: 600; }
.sc-en__rows { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.sc-en__rows li { display: grid; grid-template-columns: 34px minmax(0, 1fr) 104px; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border-radius: 14px; background: #F4F4F4; }
.sc-en__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #E4E4E4; font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; color: #57514A; }
.sc-en__rows strong { display: block; font-size: 15px; font-weight: 600; }
.sc-en__rows small { display: block; font-size: 13px; color: #6E6A66; }
.sc-pill { position: relative; display: block; height: 28px; }
.sc-pill span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 600; transition: opacity 220ms ease, transform 220ms cubic-bezier(0.23, 1, 0.32, 1); }
.sc-pill .a { background: #E8E8E8; color: #57514A; }
.sc-pill .b { background: #DCEBDD; color: #2C6A31; opacity: 0; transform: scale(.92); }
.sc-pill.done .a { opacity: 0; } .sc-pill.done .b { opacity: 1; transform: none; }
.sc-en__prog { margin-top: auto; padding-top: 14px; }
.sc-en__bar { height: 6px; border-radius: 3px; background: #E8E8E8; overflow: hidden; }
.sc-en__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: #2C6A31; transition: width 300ms cubic-bezier(0.23, 1, 0.32, 1); }
.sc-en__foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.sc-en__foot b { font-family: "Anton", Impact, sans-serif; font-weight: 400; font-size: 40px; line-height: 1; color: #AE2D23; }
.sc-en__foot span { font-size: 14px; color: #6E6A66; }

/* ---------- Sidequest: four friends' picks blend into one night out (sample friends) ---------- */
.sc-sq { width: 360px; height: 560px; border-radius: 28px; background: #120F1F; color: #F4F1FA; font-family: "Hanken Grotesk", system-ui, sans-serif; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); padding: 22px 20px; display: flex; flex-direction: column; clip-path: inset(0 0 0 0 round 28px); }
.sc-sq__k { font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #A79FBF; }
.sc-sq__h { margin: 4px 0 0; font-size: 28px; font-weight: 500; letter-spacing: -.01em; }
.sc-sq__who { display: flex; gap: 10px; margin-top: 14px; }
.sc-sq__who span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 15px; font-weight: 600; color: #120F1F; }
.sc-sq__lbl { margin: 18px 0 0; font-size: 14px; font-weight: 600; color: #D9D2EC; }
.sc-sq__chips { display: flex; flex-wrap: wrap; gap: 8px; min-height: 66px; margin-top: 10px; align-content: flex-start; }
.sc-sq__chips span { padding: 7px 12px; border-radius: 999px; background: #2A2340; color: #EDE7FB; font-size: 13px; font-weight: 500; }
.sc-sq__chips span.top { background: #F4F1FA; color: #120F1F; }
.sc-sq__pick { margin-top: 14px; padding: 14px; border-radius: 16px; background: #3A2A6E; box-shadow: inset 0 0 0 1.5px #8B6CF0; }
.sc-sq__pick b { display: block; font-size: 16px; font-weight: 600; }
.sc-sq__pick small { display: block; margin-top: 2px; font-size: 13px; color: #CFC5F0; }
.sc-sq__why { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #2A2340; font-size: 13px; line-height: 1.45; color: #E3DCF7; }
.sc-sq__vote { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 12px 16px; border-radius: 999px; background: linear-gradient(90deg, #A970FF, #F06EC4); color: #120F1F; font-size: 15px; font-weight: 700; }
.sc-sq__vote i { font-style: normal; font-variant-numeric: tabular-nums; }

/* ---------- Digital Enrolment, as recorded (member journey, customize coverage). Scoped to .sc-enx so the
   product's own button, header and check styles never touch the site's. Redrawn, generic data, no logo.
   Source: design/prototypes/enrolment-scenes.html ---------- */
.sc-enx { --p-navy: #0E5A87; --p-navy-2: #14496B; --p-sky: #E4F2FA; --p-blue: #2A6CC4; --p-lime: #9DB42A; --p-grey: #5E5E5E; --p-line: #CFCFCF;
  --f-prod: "Nunito Sans", "Hanken Grotesk", system-ui, sans-serif; position: relative; display: grid; place-items: center; font-family: var(--f-prod); color: #333; text-align: left; line-height: 1.4; }
.sc-enx * { box-sizing: border-box; }
.sc-enx p, .sc-enx h4, .sc-enx h5, .sc-enx h6 { margin: 0; }
@keyframes ring { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.4); } }
.sc-enx .win { background: #fff; border-radius: 12px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75); overflow: hidden; }
.sc-enx .hd { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--p-sky); color: var(--p-navy-2); font-weight: 700; font-size: 18px; }
.sc-enx .hd svg { width: 20px; height: 20px; flex: none; }
.sc-enx .btn { display: grid; place-items: center; height: 40px; padding: 0 16px; border-radius: 4px; background: var(--p-blue); color: #fff; font-weight: 700; font-size: 15px; }
.sc-enx .chk { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--p-lime); color: #fff; font-size: 11px; font-weight: 800; flex: none; }
.sc-enx .cursor { position: absolute; z-index: 9; width: 22px; height: 22px; pointer-events: none; }
.sc-enx .cursor::before { content: ""; position: absolute; inset: 0; background: #fff; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 95%, 52% 88%, 37% 55%, 66% 55%); filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.sc-enx .cursor::after { content: ""; position: absolute; left: -10px; top: -10px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; opacity: 0; }
.sc-enx .cursor.click::after { animation: ring 380ms cubic-bezier(.23,1,.32,1); }
.sc-enx .A-modal { position: absolute; width: 520px; }
.sc-enx .A-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; padding: 18px 22px 22px; }
.sc-enx .A-col h4 { margin: 8px 0 10px; color: var(--p-navy-2); font-size: 20px; font-weight: 800; }
.sc-enx .A-ico { display: flex; align-items: center; gap: 6px; height: 40px; }
.sc-enx .A-ico i { width: 30px; height: 30px; border-radius: 50% 50% 8px 8px; background: #2BA3DE; }
.sc-enx .A-ico i + i { margin-left: -16px; background: #1287C8; }
.sc-enx .A-ico b { width: 18px; height: 18px; border-radius: 50%; background: var(--p-lime); }
.sc-enx .A-ico s { width: 36px; height: 26px; border: 3px solid var(--p-navy); border-radius: 3px; }
.sc-enx .A-col li { display: flex; gap: 8px; margin: 0 0 8px; font-size: 13px; line-height: 1.35; color: var(--p-grey); list-style: none; }
.sc-enx .A-col ul { margin: 0; padding: 0; min-height: 112px; }
.sc-enx .A-col .btn { margin-top: 8px; height: 36px; font-size: 13px; }
.sc-enx .A-up { position: absolute; width: 540px; opacity: 0; }
.sc-enx .A-up .in { padding: 14px 22px 18px; }
.sc-enx .A-up h5 { margin: 0; font-size: 19px; color: #555; font-weight: 700; }
.sc-enx .A-up .t { margin: 6px 0 12px; font-size: 12.5px; color: var(--p-grey); line-height: 1.45; }
.sc-enx .A-file { display: flex; align-items: center; gap: 10px; }
.sc-enx .A-file .btn { height: 36px; font-size: 13px; }
.sc-enx .A-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 4px; background: #F1F6EA; color: #4F6011; font-size: 13px; font-weight: 700; opacity: 0; }
.sc-enx .A-map { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
.sc-enx .A-map h6 { margin: 4px 0 6px; font-size: 17px; color: #555; font-weight: 700; }
.sc-enx .A-map .need { padding: 7px 0; border-bottom: 1px solid #E1E1E1; font-size: 13px; color: #444; }
.sc-enx .A-map .need small { display: block; color: #8A8A8A; font-size: 11px; }
.sc-enx .A-map .have { display: flex; align-items: center; justify-content: space-between; height: 32px; margin: 6px 0; padding: 0 10px; border: 1.5px solid #555; border-radius: 3px; font-size: 13px; color: #888; }
.sc-enx .A-map .have.ok { border-color: var(--p-lime); color: #333; }
.sc-enx .A-map .have .chk { opacity: 0; }
.sc-enx .A-map .have.ok .chk { opacity: 1; }
.sc-enx .B-win { width: 560px; }
.sc-enx .B-top { padding: 10px 18px 0; font-size: 12px; color: #777; text-align: center; }
.sc-enx .B-steps { position: relative; height: 92px; margin: 6px 18px 0; }
.sc-enx .B-pill { position: absolute; top: 4px; height: 34px; border-radius: 17px; background: var(--p-navy); color: #fff; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 4px; font-weight: 800; font-size: 14px; white-space: nowrap; }
.sc-enx .B-pill i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--p-navy); font-style: normal; font-size: 14px; }
.sc-enx .B-pill.p2 { background: #B7C6D2; }
.sc-enx .B-dots { position: absolute; left: 0; right: 0; top: 50px; display: grid; grid-template-columns: repeat(6, 1fr); }
.sc-enx .B-dots span { display: grid; justify-items: center; gap: 4px; font-size: 9.5px; color: #888; text-align: center; line-height: 1.2; }
.sc-enx .B-dots i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #B9B9B9; background: #fff; font-style: normal; font-size: 10px; color: #888; transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
.sc-enx .B-dots span.on i { background: var(--p-lime); border-color: var(--p-lime); color: #fff; }
.sc-enx .B-dots span.cur i { border-color: var(--p-lime); color: var(--p-lime); box-shadow: 0 0 0 3px rgba(157,180,42,.25); }
.sc-enx .B-dots span.cur { color: #333; font-weight: 700; }
.sc-enx .B-card { margin: 8px 18px 18px; border: 1px solid #E3E3E3; border-radius: 6px; overflow: hidden; height: 330px; position: relative; }
.sc-enx .B-pane { position: absolute; inset: 0; }
.sc-enx .B-pane .hd { font-size: 16px; padding: 10px 14px; }
.sc-enx .B-pane .in { padding: 12px 16px; }
.sc-enx .B-pane .t { margin: 0 0 10px; font-size: 12px; color: #666; }
.sc-enx .B-pane h5 { margin: 10px 0 6px; font-size: 15px; color: var(--p-navy); font-weight: 800; }
.sc-enx .B-f { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.sc-enx .B-f span { height: 30px; border: 1px solid #BDBDBD; border-radius: 3px; padding: 6px 8px; font-size: 12px; color: #9A9A9A; }
.sc-enx .B-f span.v { color: #333; }
.sc-enx .B-yn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-enx .B-yn span { height: 50px; border: 1px solid #BDBDBD; border-radius: 6px; padding: 14px; font-size: 14px; font-weight: 700; position: relative; }
.sc-enx .B-yn span::after { content: ""; position: absolute; right: 10px; top: 10px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #666; }
.sc-enx .B-yn span.sel { border-color: var(--p-blue); background: var(--p-sky); }
.sc-enx .B-yn span.sel::after { border-color: var(--p-blue); background: radial-gradient(circle, var(--p-blue) 0 45%, #fff 50%); }
.sc-enx .B-done { display: grid; place-items: center; align-content: center; gap: 10px; height: 100%; text-align: center; }
.sc-enx .B-done .big { width: 64px; height: 64px; font-size: 30px; }
.sc-enx .B-done b { font-size: 20px; color: var(--p-navy-2); }
.sc-enx .B-done small { font-size: 13px; color: #666; max-width: 30ch; }
.sc-enx .C-win { width: 560px; position: relative; overflow: visible; }
.sc-enx .C-win > .hd { border-radius: 12px 12px 0 0; }
.sc-enx .C-win .in { padding: 14px 22px 20px; }
.sc-enx .C-win h5 { margin: 0; font-size: 20px; color: var(--p-navy-2); font-weight: 800; }
.sc-enx .C-win .t { margin: 8px 0 12px; font-size: 12.5px; color: #333; font-weight: 600; line-height: 1.45; }
.sc-enx .C-q { font-size: 13.5px; color: #333; display: flex; align-items: center; gap: 6px; }
.sc-enx .C-q i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--p-blue); color: #fff; font-style: normal; font-size: 10px; font-weight: 800; }
.sc-enx .C-yn { display: grid; grid-template-columns: 170px 170px; gap: 12px; margin: 8px 0 14px; }
.sc-enx .C-yn span { height: 64px; border: 1px solid #777; border-radius: 6px; padding: 22px 14px; font-size: 15px; font-weight: 700; position: relative; transition: background-color 200ms ease, border-color 200ms ease; }
.sc-enx .C-yn span::after { content: ""; position: absolute; right: 10px; top: 10px; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #555; background: #fff; }
.sc-enx .C-yn span.sel { border: 2px solid var(--p-blue); background: var(--p-sky); }
.sc-enx .C-yn span.sel::after { border-color: var(--p-blue); background: radial-gradient(circle, var(--p-blue) 0 45%, #fff 50%); }
.sc-enx .C-row { display: grid; grid-template-columns: 210px 1fr; gap: 22px; padding-top: 14px; border-top: 1px solid #DDD; }
.sc-enx .C-sel { position: relative; }
.sc-enx .C-sel .lbl { font-size: 13px; color: #333; display: flex; align-items: center; gap: 6px; }
.sc-enx .C-dd { display: flex; justify-content: space-between; align-items: center; height: 40px; margin-top: 6px; padding: 0 12px; border: 1px solid #777; border-radius: 4px; font-size: 14px; color: #888; }
.sc-enx .C-dd.v { color: #222; font-weight: 700; border-color: var(--p-blue); }
.sc-enx .C-list { position: absolute; left: 0; right: 0; top: 70px; z-index: 3; background: #fff; border: 1px solid #999; border-radius: 4px; box-shadow: 0 10px 24px rgba(0,0,0,.18); opacity: 0; transform-origin: top; }
.sc-enx .C-list p { margin: 0; padding: 8px 12px; font-size: 13px; }
.sc-enx .C-list p.hi { background: var(--p-sky); color: var(--p-navy-2); font-weight: 700; }
.sc-enx .C-cost { padding-left: 16px; border-left: 3px solid var(--p-lime); }
.sc-enx .C-cost b { font-size: 14px; color: #333; letter-spacing: .02em; }
.sc-enx .C-cost p { margin: 6px 0 0; font-size: 13px; color: #555; line-height: 1.5; }
.sc-enx .C-cost em { font-style: normal; font-weight: 800; color: var(--p-lime); font-variant-numeric: tabular-nums; }
.sc-enx .C-tip { position: absolute; left: 22px; right: 22px; bottom: -86px; display: flex; gap: 12px; padding: 12px 14px; border-radius: 6px; background: #F3F3F3; border-left: 4px solid var(--p-lime); box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); opacity: 0; }
.sc-enx .C-tip svg { width: 24px; height: 24px; flex: none; color: var(--p-navy); }
.sc-enx .C-tip b { display: block; font-size: 13px; color: #333; }
.sc-enx .C-tip span { font-size: 12px; color: #666; line-height: 1.45; }
.sc-enx .D-wall { position: absolute; left: 50%; top: 50%; width: 1500px; display: grid; grid-template-columns: repeat(4, 340px); gap: 26px; transform: translate(-50%, -50%) rotate(-18deg) skewX(8deg); }
.sc-enx .D-wall .win { height: 230px; border-radius: 10px; }
.sc-enx .D-col { display: grid; gap: 26px; animation: drift 26s linear infinite; }
.sc-enx .D-col:nth-child(2n) { animation-direction: reverse; }
.sc-enx .D-paused .D-col { animation-play-state: paused; }
.sc-enx .mini { padding: 0; font-size: 11px; }
.sc-enx .mini .hd { font-size: 12px; padding: 7px 10px; }
.sc-enx .mini .body { padding: 10px; }
.sc-enx .mini .bar { height: 18px; border-radius: 9px; background: var(--p-navy); width: 70%; margin-bottom: 8px; }
.sc-enx .mini .ln { height: 7px; border-radius: 4px; background: #E3E3E3; margin: 6px 0; }
.sc-enx .mini .fld { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.sc-enx .mini .fld i { height: 18px; border: 1px solid #C9C9C9; border-radius: 2px; }
.sc-enx .mini .big { display: grid; place-items: center; height: 100%; background: linear-gradient(135deg, #2A6F98, #0E5A87); color: #fff; font-size: 22px; font-weight: 800; text-align: center; padding: 20px; }
.sc-enx .mini .big small { display: block; font-size: 12px; font-weight: 600; opacity: .85; margin-top: 4px; }
.sc-enx .w2 { background: #fff; border-radius: 10px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.75); overflow: hidden; font-family: var(--f-prod); color: #333; }
.sc-enx .T-grp { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #E6E6E6; }
.sc-enx .T-grp b { color: var(--p-navy-2); font-size: 17px; font-weight: 800; }
.sc-enx .T-grp small { margin-left: auto; font-size: 11px; color: #777; text-align: right; line-height: 1.3; }
.sc-enx .T-ico { width: 26px; height: 16px; background: radial-gradient(circle at 5px 5px, var(--p-navy) 4px, transparent 5px) 0 0 / 9px 16px repeat-x; }
.sc-enx .T-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 4px; }
.sc-enx .T-bar h6 { margin: 0; font-size: 14px; color: var(--p-navy-2); font-weight: 800; }
.sc-enx .T-add { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1.5px solid var(--p-blue); border-radius: 4px; color: var(--p-blue); font-size: 12px; font-weight: 700; background: #fff; }
.sc-enx .T-tools { padding: 4px 18px; font-size: 11px; color: #555; display: flex; gap: 14px; }
.sc-enx .T-tb { width: 100%; border-collapse: collapse; font-size: 12px; }
.sc-enx .T-tb th { text-align: left; padding: 7px 18px; font-size: 11.5px; color: #333; font-weight: 700; border-bottom: 1px solid #DDD; }
.sc-enx .T-tb td { padding: 7px 18px; border-bottom: 1px solid #EEE; color: #555; }
.sc-enx .T-tb td:first-child { color: #333; }
.sc-enx .T-st { font-weight: 700; }
.sc-enx .T-st.c { color: #3E7C25; }
.sc-enx .T-st.p { color: #9A6A0C; }
.sc-enx .T-st.n { color: var(--p-blue); }
.sc-enx .T-new td { background: #F3F9EC; }
.sc-enx .S-pills { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: 14px 16px 0; height: 34px; border-radius: 17px; background: var(--p-navy); }
.sc-enx .S-pills span { display: flex; align-items: center; gap: 8px; padding-left: 4px; color: #fff; font-size: 14px; font-weight: 700; }
.sc-enx .S-pills i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--p-navy-2); border: 2px solid #fff; font-style: normal; font-size: 14px; }
.sc-enx .S-pills span.dim { opacity: .55; }
.sc-enx .S-line { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); margin: 8px 16px 0; }
.sc-enx .S-line::before { content: ""; position: absolute; left: 8.3%; right: 8.3%; top: 9px; height: 2px; background: #C9D3DA; }
.sc-enx .S-line::after { content: ""; position: absolute; left: 8.3%; top: 9px; height: 2px; width: var(--fill, 0%); background: var(--p-navy); transition: width 400ms cubic-bezier(.23,1,.32,1); }
.sc-enx .S-line span { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; font-size: 8.5px; color: #666; text-align: center; }
.sc-enx .S-line i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C9D3DA; background: #fff; font-style: normal; font-size: 10px; color: #fff; transition: background-color 200ms ease, border-color 200ms ease; }
.sc-enx .S-line span.on i { background: var(--p-navy); border-color: var(--p-navy); }
.sc-enx .S-line span.cur i { border-color: var(--p-lime); background: #fff; box-shadow: 0 0 0 3px rgba(157,180,42,.25); }
.sc-enx .S-card { position: relative; height: 336px; margin: 10px 16px 16px; }
.sc-enx .S-pane { position: absolute; inset: 0; border: 1px solid #E3E3E3; border-radius: 6px; overflow: hidden; background: #fff; }
.sc-enx .S-pane .hd { font-size: 15px; padding: 9px 12px; }
.sc-enx .S-pane .in { padding: 10px 14px; }
.sc-enx .S-pane .t { margin: 0 0 6px; font-size: 11px; color: #555; }
.sc-enx .S-pane h5 { margin: 8px 0 6px; font-size: 14px; color: var(--p-navy); font-weight: 800; }
.sc-enx .FL { display: grid; gap: 8px; }
.sc-enx .FL.c3 { grid-template-columns: 1fr 1fr 1fr; }
.sc-enx .FL.c1 { grid-template-columns: 1fr; }
.sc-enx .FL span { position: relative; display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 9px; border: 1px solid #A9A9A9; border-radius: 3px; font-size: 12px; color: #6E6E6E; }
.sc-enx .FL span small { position: absolute; left: 7px; top: -7px; padding: 0 3px; background: #fff; font-size: 9px; color: #666; opacity: 0; }
.sc-enx .FL span.v { color: #222; }
.sc-enx .FL span.v small { opacity: 1; }
.sc-enx .FL span em { font-style: normal; color: #6E9A26; font-weight: 800; opacity: 0; }
.sc-enx .FL span.v em { opacity: 1; }
.sc-enx .cheque { height: 66px; margin: 6px 0 10px; border-radius: 4px; background: repeating-linear-gradient(0deg, #EDEDED 0 1px, #F7F7F7 1px 12px); border: 1px solid #DDD; display: grid; place-items: center; font-size: 13px; letter-spacing: .3em; color: #BBB; font-weight: 700; }
.sc-enx .CV-ban { padding: 10px 12px; background: #A8BB1E; color: #233; font-size: 11px; line-height: 1.4; }
.sc-enx .CV-ban b { display: block; font-size: 12px; }
.sc-enx .CV-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px; }
.sc-enx .CV { padding: 10px; border: 1px solid #A9C8DE; border-radius: 4px; background: #F2F8FC; text-align: center; transition: background-color 220ms ease, border-color 220ms ease; }
.sc-enx .CV h6 { margin: 0; font-size: 11px; color: #333; font-weight: 700; }
.sc-enx .CV b { display: block; margin: 4px 0 6px; font-size: 18px; color: #222; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-enx .CV .sel { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 14px; border-radius: 3px; background: var(--p-navy-2); color: #fff; font-size: 11.5px; font-weight: 700; transition: background-color 220ms ease, color 220ms ease; }
.sc-enx .CV small { display: block; margin-top: 6px; font-size: 9.5px; color: #666; line-height: 1.35; }
.sc-enx .CV.on { background: #F4F6E3; border-color: #CBD58A; }
.sc-enx .CV.on .sel { background: #A8BB1E; color: #1F2A0A; }
.sc-enx .CV.cur .sel { background: var(--p-blue); }
.sc-enx .CG { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.sc-enx .CG-card { border-left: 8px solid #A8BB1E; padding: 10px 10px; font-size: 10px; line-height: 1.45; color: #333; box-shadow: 0 1px 0 #E3E3E3, 0 0 0 1px #EEE; }
.sc-enx .CG-card p { margin: 0; }
.sc-enx .CG-card .h { color: var(--p-blue); font-weight: 700; margin-top: 4px; }
.sc-enx .CG-dl { margin-top: 8px; display: grid; gap: 5px; }
.sc-enx .CG-dl span { display: grid; place-items: center; height: 22px; font-size: 10.5px; font-weight: 700; }
.sc-enx .CG-dl span:first-child { background: #A8BB1E; color: #1F2A0A; }
.sc-enx .CG-dl span:last-child { background: #1F78B8; color: #fff; } /* deepened from #3AA0E0 so white text passes 4.5:1 */
.sc-enx .CG-msg { padding: 10px 12px; border: 1px solid #E5E5E5; }
.sc-enx .CG-msg b { display: block; color: var(--p-navy-2); font-size: 17px; font-weight: 800; line-height: 1.15; }
.sc-enx .CG-msg span { display: block; color: var(--p-navy-2); font-size: 12.5px; font-weight: 700; margin-top: 2px; }
.sc-enx .CG-msg p { margin: 8px 0 0; font-size: 10px; color: #555; line-height: 1.45; }
.sc-enx .CG-msg .act { display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 10px; box-shadow: 0 0 0 2px #7D9B12; font-weight: 700; color: #333; }
.sc-enx .CG-reg { display: flex; justify-content: flex-end; padding: 0 12px 12px; }
.sc-enx .CG-reg span { padding: 7px 14px; background: var(--p-navy-2); color: #fff; font-size: 11px; font-weight: 700; border-radius: 3px; }