/* Selected C3 gallery login. Scoped to login so workspace typography is untouched.
 * Desktop keeps the first view as a complete landing screen; configured imagery
 * remains in a restrained 16:9 frame instead of expanding the page vertically.
 * One visual unit is 1px through Full HD, grows with the smaller viewport ratio
 * (width / 1920, height / 1080), and caps at 2px for 4K. Use CSS viewport size,
 * not physical pixels/DPR, so OS scaling and browser zoom are not doubled. */
.login-gallery { --login-unit:clamp(1px,min(.0520833333vw,.0925925926svh),2px); --login-blue:#376ab0; --login-ink:#233b59; --login-muted:#687e99; --login-line:#d6e2f0; display:grid; grid-template-columns:minmax(0,1fr) clamp(400px,32vw,590px); height:auto; min-height:100svh; overflow:visible; background:#f0f5fc; color:var(--login-ink); }
.login-gallery .hero-quality { --login-hero-pad-y:clamp(calc(48 * var(--login-unit)),5.5vh,calc(80 * var(--login-unit))); position:relative; isolation:isolate; display:flex; align-items:stretch; min-width:0; min-height:100svh; padding:var(--login-hero-pad-y) clamp(calc(32 * var(--login-unit)),4vw,calc(80 * var(--login-unit))); background:linear-gradient(125deg,#f4f8fe,#e9f1fc); color:var(--login-ink); overflow:visible; }
/* A restrained traceability blueprint: data points and a route, not a generic
 * decorative glyph. It stays beneath text and the carousel image. */
.login-gallery .hero-content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:clamp(calc(16 * var(--login-unit)),2.2vh,calc(24 * var(--login-unit))); width:100%; min-height:0; max-width:min(calc(860 * var(--login-unit)),calc((100svh - calc(360 * var(--login-unit))) * 16 / 9)); margin:0 auto; }
.login-brand-header { display:flex; align-items:center; gap:calc(11 * var(--login-unit)); min-width:0; }
.login-brand-header b { display:block; font-size:calc(20 * var(--login-unit)); font-weight:600; letter-spacing:.02em; overflow-wrap:anywhere; }
.login-brand-header small { display:block; color:var(--login-muted); font-size:calc(9 * var(--login-unit)); letter-spacing:.13em; margin-top:calc(3 * var(--login-unit)); }
.login-gallery .hero-quality .login-mark-symbol { width:calc(34 * var(--login-unit)); height:calc(34 * var(--login-unit)); }
.login-gallery .login-mark-symbol { flex:none; width:calc(39 * var(--login-unit)); height:calc(39 * var(--login-unit)); color:var(--login-blue); background:none; border:0; border-radius:0; box-shadow:none; }
.login-gallery .login-mark-symbol svg { display:block; width:100%; height:100%; }
.login-gallery .org-slide { display:grid; width:100%; max-width:none; gap:calc(10 * var(--login-unit)); margin:0; padding:0; border:0; }
.login-gallery .slide-photo { display:flex; width:100%; height:auto; min-height:0; aspect-ratio:16 / 9; padding:calc(24 * var(--login-unit)); border:1px solid #d4e1f1; border-radius:calc(10 * var(--login-unit)); background:linear-gradient(115deg,#dbe8f8,#edf4fe 60%,#d6e4f7); box-shadow:none; color:var(--login-ink); }
.login-gallery .slide-photo::before { background:linear-gradient(180deg,transparent 55%,#122a446b); }
.login-gallery .slide-photo:not(:has(img))::before { background:linear-gradient(115deg,transparent 60%,#ffffff66); }
.login-gallery .slide-photo-placeholder { position:relative; top:auto; left:auto; align-self:flex-start; margin:auto 0; padding:0; border:0; background:none; }
.login-gallery .slide-photo-placeholder span { color:var(--login-ink); font-size:calc(28 * var(--login-unit)); font-weight:500; letter-spacing:.04em; }
.login-gallery .slide-photo-placeholder small { margin-top:calc(12 * var(--login-unit)); color:var(--login-muted); font-size:calc(14 * var(--login-unit)); }
.login-gallery .slide-photo:not(:has(img)) .login-gallery-overlay>span { background:#ffffff8c; color:#4c6686; border-color:#c4d5e9; }
.login-gallery .slide-photo:not(:has(img)) .login-gallery-count { color:var(--login-ink); text-shadow:none; }
.login-gallery .slide-photo:not(:has(img)) .login-gallery-count small { color:var(--login-muted); }
.login-gallery .login-gallery-copy { gap:calc(14 * var(--login-unit)); padding:0; }
.login-gallery .login-gallery-copy b { color:#355779; font-size:calc(13 * var(--login-unit)); font-weight:550; }
.login-gallery .login-gallery-copy p { color:var(--login-muted); font-size:calc(11 * var(--login-unit)); margin-top:calc(3 * var(--login-unit)); line-height:1.6; }
.login-gallery .slide-dots button { background:#b5c7de; }
.login-gallery .slide-dots button.active { background:var(--login-blue); }
/* One shared content measure aligns the introduction and 16:9 photograph. */
.login-gallery .login-editorial { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:clamp(calc(28 * var(--login-unit)),3vw,calc(48 * var(--login-unit))); row-gap:calc(16 * var(--login-unit)); align-items:center; width:100%; margin:0; }
.login-gallery .eyebrow { grid-column:1; color:var(--login-blue); font-size:calc(10 * var(--login-unit)); letter-spacing:.16em; font-weight:600; }
.login-gallery .pulse-dot { background:var(--login-blue); box-shadow:0 0 0 calc(4 * var(--login-unit)) #376ab012; }
.login-gallery .hero h1 { max-width:11em; margin:0 0 calc(12 * var(--login-unit)); font-size:clamp(calc(28 * var(--login-unit)),2.1vw,calc(40 * var(--login-unit))); font-weight:550; line-height:1.3; letter-spacing:.005em; color:var(--login-ink); overflow-wrap:anywhere; }
.login-gallery .login-editorial>p { grid-column:2; margin:0; font-size:clamp(calc(13 * var(--login-unit)),.85vw,calc(16 * var(--login-unit))); color:var(--login-muted); line-height:1.9; white-space:normal; }
.login-gallery .hero-metrics { display:flex; flex-wrap:wrap; max-width:none; margin:calc(14 * var(--login-unit)) 0 0; padding:0; border:0; gap:calc(10 * var(--login-unit)) calc(24 * var(--login-unit)); }
.login-gallery .hero-metrics>div,.login-gallery .hero-metrics>div+div { min-height:0; padding:0; border:0; background:none; }
.login-gallery .hero-metrics b { font-size:calc(12 * var(--login-unit)); color:#345575; font-weight:500; margin:0; }
.login-gallery .hero-metrics span { color:var(--login-muted); font-size:calc(11 * var(--login-unit)); }
.login-gallery .hero-metrics b{display:inline-flex;align-items:center;gap:calc(7 * var(--login-unit))}
.login-gallery .hero-metrics b::before{content:"";flex:none;width:calc(5 * var(--login-unit));height:calc(5 * var(--login-unit));border-radius:50%;background:#4a80bb;opacity:.45;animation:login-flow-pulse 6s ease-in-out infinite}
.login-gallery .hero-metrics>div:nth-child(2) b::before{animation-delay:2s}
.login-gallery .hero-metrics>div:nth-child(3) b::before{animation-delay:4s}
@keyframes login-flow-pulse{0%,34%,100%{opacity:.4;box-shadow:0 0 0 0 #4a80bb00}15%{opacity:1;box-shadow:0 0 0 calc(4 * var(--login-unit)) #4a80bb15}}
@media(prefers-reduced-motion:reduce){.login-gallery .hero-metrics b::before{animation:none;opacity:.65}}
@media(min-width:1101px){
  .login-gallery .login-brand-header{margin-bottom:calc(14 * var(--login-unit))}
  .login-gallery .login-editorial h1{grid-column:1;grid-row:1 / span 2;align-self:center;margin:0;font-size:clamp(calc(28 * var(--login-unit)),2vw,calc(36 * var(--login-unit)))}
  .login-gallery .login-editorial>p{align-self:end}
  .login-gallery .login-editorial .hero-metrics{grid-column:2;grid-row:2;align-self:start;margin:0;padding:0;gap:calc(8 * var(--login-unit)) calc(18 * var(--login-unit))}
}
/* Decoration belongs to the background edge, never behind the copy. */
.login-gallery .hero-quality::before,.login-gallery .hero-quality::after { content:none; display:none; }
.login-gallery .login-panel { min-width:0; min-height:0; padding:calc(35 * var(--login-unit)) clamp(calc(27 * var(--login-unit)),3vw,calc(55 * var(--login-unit))); overflow:visible; border-left:1px solid var(--login-line); background:#fff; }
.login-gallery .login-card-shell { width:100%; max-width:calc(400 * var(--login-unit)); min-height:0; padding:0; border:0; border-radius:0; background:#fff; box-shadow:none; backdrop-filter:none; }
.login-gallery .login-card { min-height:0; }
.login-gallery .login-mark { margin-bottom:calc(30 * var(--login-unit)); }
.login-gallery .login-mark b { font-size:calc(17 * var(--login-unit)); font-weight:550; color:var(--login-ink); overflow-wrap:anywhere; }
.login-gallery .login-mark small { color:var(--login-muted); font-size:calc(9 * var(--login-unit)); font-weight:500; letter-spacing:.08em; }
.login-gallery .login-card-heading>span { color:var(--login-blue); font-size:calc(12 * var(--login-unit)); font-weight:600; }
.login-gallery .login-card h2 { margin:calc(10 * var(--login-unit)) 0 calc(12 * var(--login-unit)); color:var(--login-ink); font-size:calc(35 * var(--login-unit)); line-height:1.3; font-weight:550; letter-spacing:.02em; }
.login-gallery .login-card-heading>p { font-size:calc(14 * var(--login-unit)); color:var(--login-muted); line-height:1.8; }
.login-gallery .login-values { display:block; width:100%; margin:calc(24 * var(--login-unit)) 0 calc(10 * var(--login-unit)); padding:calc(19 * var(--login-unit)) 0; border-color:var(--login-line); color:var(--login-ink); line-height:1.4; white-space:normal; letter-spacing:normal; }
.login-values-heading { display:flex; align-items:center; gap:calc(10 * var(--login-unit)); margin-bottom:calc(18 * var(--login-unit)); color:var(--login-blue); }
.login-values-heading>span { font-size:calc(12 * var(--login-unit)); font-weight:600; letter-spacing:.12em; }
.login-values-heading i { flex:1; height:1px; background:var(--login-line); }
.login-values-heading small { font-size:calc(9 * var(--login-unit)); font-weight:500; letter-spacing:.1em; }
.login-values-words { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(6 * var(--login-unit)); }
.login-values-words>div { text-align:center; border-right:1px solid var(--login-line); }
.login-values-words>div:last-child { border:0; }
.login-values-words b { display:block; font-size:clamp(calc(22 * var(--login-unit)),1.5vw,calc(30 * var(--login-unit))); font-weight:550; letter-spacing:.07em; color:#315b91; }
.login-values-words small { display:block; margin-top:calc(8 * var(--login-unit)); font-size:calc(8 * var(--login-unit)); font-weight:500; letter-spacing:.04em; color:var(--login-muted); }
.login-gallery .login-card>label { margin:calc(20 * var(--login-unit)) 0 calc(9 * var(--login-unit)); color:#395574; font-size:calc(14 * var(--login-unit)); font-weight:500; }
.login-gallery .login-card input { min-width:0; height:calc(48 * var(--login-unit)); padding:0 calc(14 * var(--login-unit)); font-size:calc(14 * var(--login-unit)); background:#fff; border:1px solid #cbd9eb; border-radius:calc(6 * var(--login-unit)); }
.login-gallery .login-card input:focus { border-color:var(--login-blue); box-shadow:0 0 0 calc(3 * var(--login-unit)) #376ab01a; }
.login-gallery .login-card .primary { display:flex; justify-content:space-between; align-items:center; min-height:calc(49 * var(--login-unit)); margin-top:calc(25 * var(--login-unit)); padding:calc(10 * var(--login-unit)) calc(18 * var(--login-unit)); border-radius:calc(6 * var(--login-unit)); background:var(--login-blue); border-color:var(--login-blue); color:#fff; font-size:calc(15 * var(--login-unit)); box-shadow:none; }
.login-gallery .login-card .primary:hover { background:#2c5793; transform:none; }
.login-gallery .security-note { margin-top:calc(23 * var(--login-unit)); padding:calc(18 * var(--login-unit)) 0 0; grid-template-columns:auto minmax(0,1fr); gap:calc(10 * var(--login-unit)); border:0; border-top:1px solid var(--login-line); border-radius:0; background:none; color:var(--login-muted); font-size:calc(12 * var(--login-unit)); line-height:1.8; }
.login-gallery .security-note b { color:#395574; font-weight:550; }
.login-gallery .demo-note { margin-top:calc(15 * var(--login-unit)); color:var(--login-muted); font-size:calc(11 * var(--login-unit)); line-height:1.85; }
@media(min-width:761px){.login-gallery{height:100svh;min-height:0;overflow:hidden;}.login-gallery .hero-quality{min-height:0;overflow:hidden;padding-top:clamp(calc(34 * var(--login-unit)),4vh,calc(60 * var(--login-unit)));padding-bottom:clamp(calc(34 * var(--login-unit)),4vh,calc(60 * var(--login-unit)));}.login-gallery .hero-content{height:100%;min-height:0;max-height:100%;}.login-gallery .login-panel{overflow:hidden;}}
@media(min-width:1800px){.login-gallery{grid-template-columns:minmax(0,1fr) 32%}.login-gallery .login-card-shell{max-width:calc(400 * var(--login-unit))}.login-gallery .login-card h2{font-size:calc(35 * var(--login-unit))}}
@media(max-height:850px){.login-gallery .hero-quality{--login-hero-pad-y:calc(24 * var(--login-unit));padding-top:var(--login-hero-pad-y);padding-bottom:var(--login-hero-pad-y)}.login-gallery .hero-content{gap:calc(12 * var(--login-unit))}.login-gallery .org-slide{max-width:calc(532 * var(--login-unit))}.login-gallery .slide-photo{height:auto;min-height:0}.login-gallery .hero h1{font-size:clamp(calc(30 * var(--login-unit)),2.25vw,calc(40 * var(--login-unit)));margin:calc(8 * var(--login-unit)) 0}.login-gallery .hero-metrics{padding-bottom:calc(2 * var(--login-unit))}.login-gallery .login-panel{padding-top:calc(23 * var(--login-unit));padding-bottom:calc(23 * var(--login-unit))}.login-gallery .login-mark{margin-bottom:calc(22 * var(--login-unit))}.login-gallery .login-card h2{font-size:calc(31 * var(--login-unit))}.login-gallery .login-values{margin-top:calc(19 * var(--login-unit));padding:calc(15 * var(--login-unit)) 0}.login-values-heading{margin-bottom:calc(13 * var(--login-unit))}.login-gallery .login-card>label{margin-top:calc(16 * var(--login-unit))}.login-gallery .login-card input{height:calc(44 * var(--login-unit))}.login-gallery .login-card .primary{min-height:calc(45 * var(--login-unit));margin-top:calc(21 * var(--login-unit))}.login-gallery .security-note{margin-top:calc(17 * var(--login-unit));padding-top:calc(14 * var(--login-unit));font-size:calc(11 * var(--login-unit))}.login-gallery .demo-note{margin-top:calc(11 * var(--login-unit));font-size:calc(10 * var(--login-unit))}}
@media(max-height:850px) and (min-width:761px){
  .login-gallery .hero-content{max-width:min(calc(800 * var(--login-unit)),calc((100svh - calc(340 * var(--login-unit))) * 16 / 9));gap:calc(16 * var(--login-unit))}
  .login-gallery .org-slide{max-width:none}
  .login-gallery .hero h1{font-size:calc(28 * var(--login-unit));margin:0 0 calc(10 * var(--login-unit))}
  .login-gallery .hero-metrics{padding:0;margin-top:calc(10 * var(--login-unit))}
}
/* Browser zoom can create a narrow CSS viewport on a desktop. Keep everything
 * reachable with natural vertical scrolling, never a clipped 100vh container. */
@media(max-width:1100px){.login-gallery{grid-template-columns:minmax(0,1fr) calc(340 * var(--login-unit))}.login-gallery .hero-quality{padding-left:calc(26 * var(--login-unit));padding-right:calc(26 * var(--login-unit))}.login-gallery .login-panel{padding-left:calc(22 * var(--login-unit));padding-right:calc(22 * var(--login-unit))}.login-gallery .login-editorial{display:block}.login-gallery .hero h1{font-size:clamp(calc(30 * var(--login-unit)),3vw,calc(34 * var(--login-unit)))}.login-gallery .hero-metrics{margin-top:calc(14 * var(--login-unit));padding-top:calc(14 * var(--login-unit))}.login-gallery .hero-metrics b{font-size:calc(13 * var(--login-unit))}.login-gallery .hero-metrics span{font-size:calc(11 * var(--login-unit))}.login-gallery .login-gallery-copy{grid-template-columns:minmax(0,1fr)}.login-gallery .slide-dots{justify-self:end}.login-brand-header b{font-size:calc(18 * var(--login-unit))}}
@media(max-width:760px){.login-gallery{display:grid;grid-template-columns:minmax(0,1fr)}.login-gallery .hero-quality{min-height:0;padding:calc(24 * var(--login-unit))}.login-gallery .hero-quality::before,.login-gallery .hero-quality::after{display:none;}.login-gallery .hero-content{gap:calc(20 * var(--login-unit))}.login-gallery .login-editorial{display:block}.login-gallery .slide-photo{display:flex;height:calc(240 * var(--login-unit));min-height:calc(240 * var(--login-unit))}.login-gallery .login-panel{min-height:0;padding:calc(32 * var(--login-unit)) calc(24 * var(--login-unit));border-left:0;border-top:1px solid var(--login-line)}.login-gallery .login-card-shell{max-width:calc(440 * var(--login-unit))}.login-gallery .hero h1{font-size:calc(32 * var(--login-unit))}.login-gallery .hero-metrics{grid-column:auto;grid-row:auto;margin-top:calc(14 * var(--login-unit));padding-top:calc(14 * var(--login-unit));grid-template-columns:repeat(3,minmax(0,1fr))}.login-gallery .login-values-words b{font-size:calc(24 * var(--login-unit))}}

/* Details inherited from the shared login styles follow the same visual unit. */
.login-gallery .login-mark { gap:calc(11 * var(--login-unit)); }
.login-gallery .login-mark small { margin-bottom:calc(3 * var(--login-unit)); }
.login-gallery .login-gallery-overlay { inset:auto calc(22 * var(--login-unit)) calc(20 * var(--login-unit)); gap:calc(12 * var(--login-unit)); }
.login-gallery .login-gallery-overlay>span { padding:calc(5 * var(--login-unit)) calc(8 * var(--login-unit)); font-size:calc(10 * var(--login-unit)); }
.login-gallery .login-gallery-count b { font-size:calc(25 * var(--login-unit)); }
.login-gallery .login-gallery-count small { margin-left:calc(4 * var(--login-unit)); font-size:calc(12 * var(--login-unit)); }
.login-gallery .slide-dots { gap:calc(6 * var(--login-unit)); max-width:calc(142 * var(--login-unit)); }
.login-gallery .slide-dots button { width:calc(17 * var(--login-unit)); height:calc(3 * var(--login-unit)); }
.login-gallery .slide-dots button.active { width:calc(25 * var(--login-unit)); }
.login-gallery .password-field input { padding-right:calc(46 * var(--login-unit)); }
.login-gallery .password-toggle { top:calc(7 * var(--login-unit)); right:calc(7 * var(--login-unit)); width:calc(30 * var(--login-unit)); min-width:calc(30 * var(--login-unit)); height:calc(30 * var(--login-unit)); min-height:calc(30 * var(--login-unit)); }
.login-gallery .password-toggle svg { width:calc(18 * var(--login-unit)); height:calc(18 * var(--login-unit)); }
.login-gallery .login-card .primary span { margin-left:calc(4 * var(--login-unit)); font-size:calc(18 * var(--login-unit)); }
.login-gallery .login-card .form-feedback { margin-top:calc(18 * var(--login-unit)); padding:calc(10 * var(--login-unit)) calc(12 * var(--login-unit)); border-radius:calc(8 * var(--login-unit)); font-size:calc(13 * var(--login-unit)); }