@charset "UTF-8";
  
:root{
  --ink:#102239;
  --muted:#536174;
  --red:#db1c3b;
  --red-dark:#bd1430;
  --cream:#f8f7f3;
  --line:#dfE3e7;
  --white:#fff;
  --radius:14px;
  --container:1240px;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--white);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:100px
}


*{
  box-sizing:border-box
}

body{
  margin:0;
  font-size:16px;
  line-height:1.65
}

button,a{
  -webkit-tap-highlight-color:transparent
}

button,input{
  font:inherit
}

button{
  cursor:pointer
}

a{
  color:inherit;
  text-decoration:none
}

button{
  color:inherit
}

img{
  display:block;
  max-width:100%;
  height:auto
}

h1,h2,h3,h4,p{
  margin:0
}

h1,h2,h3,h4{
  line-height:1.15
}

h2{
  font-size:clamp(2.15rem,3.25vw,2.9rem);
  font-weight:650;
  letter-spacing:-1.65px
}

h2 em,h1 em{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-1.6px
}

h3{
  font-size:1.35rem;
  letter-spacing:-.45px
}

h4{
  font-size:1.35rem;
  font-weight:650;
  letter-spacing:-.4px
}

p{
  color:var(--muted)
}

::selection{
  background:#ffe0e5;
  color:var(--ink)
}

:focus-visible{
  outline:3px solid #2564cb;
  outline-offset:5px;
  border-radius:3px
}

[hidden]{
  display:none!important
}

.container{
  width:min(var(--container),calc(100% - 96px));
  margin-inline:auto
}

.section{
  padding:106px 0
}

.eyebrow{
  font-size:.75rem;
  font-weight:700;
  letter-spacing:1.7px;
  line-height:1.5;
  color:var(--muted);
  margin-bottom:24px
}

.button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  min-height:52px;
  padding:13px 22px;
  border:1px solid transparent;
  border-radius:7px;
  color:#fff;
  background:var(--red);
  font-size:.94rem;
  font-weight:600;
  line-height:1.5;
  transition:background .18s,transform .18s;
  white-space:nowrap
}

.button:hover{
  background:var(--red-dark);
  transform:translateY(-2px)
}

.button span{
  font-size:1.3rem;
  font-weight:400
}

.button-small{
  min-height:43px;
  padding:8px 15px;
  gap:14px;
  font-size:.85rem
}

.text-link{
  font-weight:600;
  font-size:.94rem;
  display:inline-flex;
  gap:18px;
  align-items:center
}

.text-link:hover{
  color:var(--red)
}

.text-link span{
  font-size:1.3rem
}

.skip-link{
  position:fixed;
  z-index:99;
  left:20px;
  top:-100px;
  background:var(--ink);
  color:white;
  padding:12px 20px
}

.skip-link:focus{
  top:12px
}

.site-header{
  height:89px;
  background:rgba(248,247,243,.96);
  border-bottom:1px solid #1022390e;
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(12px)
}

.header-inner{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  font-size:1.75rem;
  letter-spacing:-1.1px;
  font-weight:730;
  line-height:1
}

.brand-number{
  font-weight:430
}

.brand-dot{
  color:var(--red)
}

.main-nav{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:.88rem;
  font-weight:550
}

.main-nav>a:not(.button):hover{
  color:var(--red)
}

.main-nav .login-link{
  margin-left:24px
}

.login-link span{
  margin-left:5px
}

.menu-toggle{
  display:none
}

.hero{
  background:var(--cream);
  overflow:hidden
}

.hero-grid{
  display:grid;
  grid-template-columns:.99fr 1.01fr;
  gap:40px;
  padding-top:83px;
  padding-bottom:85px;
  min-height:594px;
  align-items:center
}

.hero-copy{
  position:relative;
  z-index:2
}

.hero .eyebrow{
  font-size:.68rem;
  letter-spacing:1.15px;
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:22px
}

.red-dash{
  width:23px;
  height:2px;
  background:var(--red);
  flex-shrink:0
}

.hero h1{
  font-size:clamp(3rem,4.2vw,3.8rem);
  letter-spacing:-2.4px;
  font-weight:650;
  line-height:1.12;
  white-space:nowrap
}

.hero h1 em{
  color:var(--red);
  font-size:1.06em;
  letter-spacing:-2.6px
}

.hero-lead{
  font-size:1.06rem;
  max-width:470px;
  line-height:1.85;
  margin-top:27px
}

.hero-actions{
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:32px
}

.hero-actions .button{
  gap:18px
}

.hero-actions .text-link{
  font-size:.88rem;
  gap:10px
}

.hero-footnote{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.82rem;
  margin-top:21px
}

.check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e3eee8;
  color:#32684d;
  flex-shrink:0;
  font-weight:700;
  font-size:.84rem
}

.hero-visual{
  position:relative;
  width:116%;
  padding-top:40px;
  padding-bottom:42px
}

.visual-label{
  position:absolute;
  top:0;
  left:12px;
  font-size:.75rem;
  font-weight:550;
  display:flex;
  align-items:center;
  gap:8px
}

.status-dot{
  height:7px;
  width:7px;
  background:#29834f;
  border-radius:50%
}

.hero-desktop{
  border-radius:10px;
  border:1px solid #d8dce2;
  background:#fff;
  overflow:hidden;
  box-shadow:0 23px 48px -24px #11284166;
  transform:perspective(1300px) rotateY(-7deg) rotateX(3deg)
}

.hero-desktop img{
  width:100%;
  height:auto
}

.window-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 13px;
  background:#fdfdfd;
  border-bottom:1px solid #e9ecef;
  font-size:.6rem;
  color:#73808c
}

.window-bar>span:first-child{
  color:#c9cfd3;
  font-size:.6rem;
  letter-spacing:3px
}

.hero-phone{
  position:absolute;
  width:21%;
  bottom:0;
  right:4%;
  filter:drop-shadow(0 15px 13px #14213932);
  transform:rotate(6deg)
}

.hero-caption{
  position:absolute;
  bottom:3px;
  left:25px;
  display:flex;
  align-items:center;
  gap:12px;
  color:#627080;
  font-size:.73rem
}

.caption-line{
  width:31px;
  height:1px;
  background:#7f8a95
}

.hero-bottom{
  border-top:1px solid #dfe1df;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0
}

.hero-bottom>span{
  font-size:.66rem;
  letter-spacing:1.5px;
  color:#65707b;
  font-weight:600
}

.hero-bottom a{
  font-size:.78rem;
  display:flex;
  gap:22px
}

.clients{
  padding-top:38px;
  padding-bottom:40px
}

.clients>p{
  text-align:center;
  font-size:.73rem;
  color:#717986
}

.client-list{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  list-style:none;
  padding:26px 0 0;
  margin:0
}

.client-list li{
  text-align:center;
  font-family:Georgia,serif;
  font-size:1rem;
  line-height:1.4;
  flex:1;
  color:#667181
}

.client-list strong{
  font-weight:500;
  font-size:1.2rem;
  color:#374658
}

.audiences{
  background:var(--cream)
}

.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:80px;
  margin-bottom:50px
}

.section-heading>div{
  flex:1
}

.section-heading>p{
  max-width:352px;
  font-size:.96rem;
  line-height:1.9;
  margin-bottom:4px
}

.section-heading .eyebrow{
  margin-bottom:20px
}

.audience-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid #dadcd9;
  border-left:1px solid #dadcd9
}

.audience-card{
  padding:31px 30px 27px;
  border-right:1px solid #dadcd9;
  border-bottom:1px solid #dadcd9;
  transition:background .2s
}

.audience-card:hover{
  background:#fff
}

.card-index{
  display:block;
  font-size:.65rem;
  letter-spacing:1.3px;
  font-weight:600;
  color:#626e7a;
  margin-bottom:26px
}

.audience-card h3{
  font-size:1.4rem;
  font-weight:600;
  line-height:1.25;
  margin-bottom:15px
}

.audience-card>p{
  font-size:.9rem;
  line-height:1.8
}

.audience-card .client-example{
  font-size:.74rem;
  line-height:1.65;
  margin-top:25px;
  padding-top:18px;
  border-top:1px solid #dee0dd;
  color:#717b86
}

.workflow-grid{
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  gap:62px;
  align-items:start
}

.workflow-tabs{
  display:flex;
  flex-direction:column
}

.workflow-tab{
  display:grid;
  grid-template-columns:24px 1fr 18px;
  align-items:start;
  gap:17px;
  text-align:left;
  padding:23px 16px;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  line-height:1.4;
  transition:background .2s
}

.workflow-tab>span:first-child{
  color:#727e8a;
  font-size:.8rem;
  padding-top:3px
}

.workflow-tab>span:nth-child(2){
  font-weight:600;
  font-size:1.04rem
}

.workflow-tab small{
  display:block;
  font-size:.81rem;
  color:var(--muted);
  font-weight:400;
  margin-top:7px
}

.workflow-tab>span:last-child{
  color:#8c97a0
}

.workflow-tab[aria-selected=true]{
  background:#fbf0f0;
  border-radius:8px;
  border-bottom-color:transparent
}

.workflow-tab[aria-selected=true]>span:first-child,.workflow-tab[aria-selected=true]>span:last-child{
  color:var(--red)
}

.workflow-tab:hover{
  background:#f7f7f5
}

.workflow-note{
  font-size:.78rem;
  padding:25px 16px;
  line-height:1.8
}

.workflow-panels{
  min-width:0
}

.screenshot-button{
  display:block;
  position:relative;
  width:100%;
  background:#f0f3f5;
  padding:0;
  border:1px solid #dce2e7;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 15px 38px -25px #24394b40;
  aspect-ratio:1.695
}

.screenshot-button>img{
  width:100%;
  height:100%;
  object-fit:contain
}

.zoom-label{
  position:absolute;
  bottom:14px;
  right:14px;
  background:#fff;
  padding:5px 12px;
  border:1px solid #dfe3e7;
  border-radius:5px;
  font-size:.75rem;
  box-shadow:0 2px 6px #0000000d
}

.device-screenshot{
  padding:15px 28px
}

.results-screenshot{
  padding:13px;
  background:#eeeae4
}

.workflow-panel>p{
  margin:20px 6px 0;
  font-size:.9rem;
  line-height:1.8
}

.voting{
  background:#f6f7f9
}

.voting .section-heading>p{
  max-width:370px
}

.voting-row{
  display:grid;
  grid-template-columns:215px 1fr 1fr;
  border-top:1px solid #d9dfe5;
  gap:22px;
  padding:28px 0
}

.voting-dimension{
  padding:20px 0
}

.voting-dimension>span{
  display:block;
  color:var(--red);
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1.6rem;
  margin-bottom:17px
}

.voting-dimension h3{
  font-size:1.16rem;
  line-height:1.4;
  font-weight:600
}

.voting-dimension>p{
  font-size:.76rem;
  margin-top:10px;
  color:#6d7783
}

.vote-card{
  background:#fff;
  border:1px solid #e4e8ed;
  border-radius:9px;
  padding:27px 29px
}

.vote-card h4{
  margin-bottom:16px
}

.vote-card p{
  font-size:.89rem;
  line-height:1.85
}

.vote-card p+p{
  margin-top:12px
}

.feature-tag{
  font-size:.71rem;
  background:#f0f3f7;
  color:#4e6075;
  padding:5px 9px;
  display:inline-block;
  border-radius:4px;
  margin-top:20px
}

.vote-options{
  display:flex;
  gap:7px;
  margin-top:20px;
  flex-wrap:wrap
}

.vote-options>span{
  font-size:.71rem;
  line-height:1.5;
  border-radius:4px;
  padding:5px 12px;
  background:#e8f4ee;
  color:#276144
}

.vote-options>span:nth-child(2){
  background:#fff0f1;
  color:#a52e3f
}

.vote-options>span:nth-child(3){
  background:#fff8de;
  color:#7a642a
}

.combination-note{
  display:flex;
  gap:13px;
  align-items:center;
  padding:20px 24px;
  background:#eaf0ed;
  border-radius:7px;
  margin:4px 0 47px
}

.combination-note p{
  font-size:.84rem;
  color:#3c5447
}

.extra-features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px
}

.extra-features>div{
  border-left:2px solid #d2dae2;
  padding-left:16px
}

.extra-features h3{
  font-size:1rem;
  font-weight:600;
  margin-bottom:10px
}

.extra-features p{
  font-size:.82rem;
  line-height:1.8
}

.availability-note{
  font-size:.73rem;
  margin-top:35px;
  color:#657283
}

.device-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:23px
}

.device-card{
  border:1px solid #e1e3e5;
  border-radius:10px;
  overflow:hidden
}

.device-picture{
  height:280px;
  position:relative;
  background:#f3f2ee;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:55px 20px 15px
}

.device-label{
  position:absolute;
  top:20px;
  left:23px;
  font-size:.63rem;
  letter-spacing:1.25px;
  color:#717a82;
  z-index:1
}

.remote-picture img{
  height:210px;
  width:auto;
  max-width:80%;
  object-fit:contain;
  transform:rotate(-10deg)
}

.tablet-picture img{
  width:100%;
  height:auto;
  transform:rotate(-6deg);
  filter:drop-shadow(0 12px 9px #00000017)
}

.phone-picture img{
  height:260px;
  width:auto;
  align-self:flex-start;
  transform:rotate(9deg);
  filter:drop-shadow(0 12px 8px #00000018)
}

.device-copy{
  padding:27px
}

.device-copy h3{
  font-size:1.3rem;
  font-weight:600;
  margin-bottom:13px
}

.device-copy p{
  font-size:.9rem;
  line-height:1.85
}

.device-detail{
  font-size:.72rem;
  display:block;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:23px;
  color:#647282
}

.device-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  margin-top:33px
}

.device-bottom p{
  font-size:.86rem
}

.device-bottom .text-link{
  font-size:.85rem
}

.broadcast-section{
  background:#102239;
  color:white;
  padding:88px 0;
  overflow:hidden
}

.broadcast-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center
}

.broadcast-copy .eyebrow{
  color:#c2cbd5;
  display:flex;
  gap:10px;
  align-items:center
}

.live-dot{
  width:7px;
  height:7px;
  background:#ed4560;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0
}

.broadcast-copy h2{
  font-size:clamp(2.25rem,3.4vw,3rem)
}

.broadcast-copy h2 em{
  color:#d6dfeb
}

.broadcast-lead{
  color:#d2dbe5;
  font-size:1.04rem;
  line-height:1.9;
  margin-top:25px
}

.broadcast-benefits{
  list-style:none;
  padding:0;
  margin:26px 0 20px;
  font-size:.9rem;
  color:#e1e6ed
}

.broadcast-benefits li{
  margin-bottom:13px;
  padding-left:24px;
  position:relative
}

.broadcast-benefits li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:#a7c9b6
}

.broadcast-detail{
  font-size:.78rem;
  color:#b8c4d1;
  line-height:1.85;
  margin-bottom:27px
}

.button-light{
  background:#fff;
  color:var(--ink);
  font-size:.86rem;
  min-height:48px
}

.button-light:hover{
  background:#f0f3f6
}

.broadcast-visual{
  background:#172e47;
  border:1px solid #ffffff15;
  border-radius:13px;
  padding:22px 26px;
  overflow:hidden
}

.broadcast-topline{
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:.57rem;
  letter-spacing:1px;
  color:#c4cfdb
}

.broadcast-topline>span:first-child{
  display:flex;
  align-items:center;
  gap:7px
}

.broadcast-visual>img{
  width:100%;
  height:300px;
  object-fit:contain;
  margin:12px 0 16px
}

.broadcast-route{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid #ffffff20;
  padding-top:22px;
  font-size:.85rem;
  color:#e1e6ed
}

.broadcast-route span:nth-child(even){
  color:#8396aa
}

.broadcast-visual>p{
  font-size:.64rem;
  color:#b6c4d3;
  text-align:center;
  margin-top:20px
}

.faq-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:85px
}

.faq-grid>div:first-child>p:last-child{
  font-size:.88rem;
  line-height:1.9;
  margin-top:26px
}

.faq-grid .text-link{
  font-size:.9rem;
  margin-top:9px
}

.faq-list{
  border-top:1px solid var(--line)
}

details{
  border-bottom:1px solid var(--line)
}

summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  font-size:.97rem;
  font-weight:550;
  line-height:1.55;
  padding:22px 0
}

summary::-webkit-details-marker{
  display:none
}

summary>span{
  font-size:1.5rem;
  font-weight:300;
  color:var(--red);
  flex-shrink:0;
  transition:transform .2s
}

details[open] summary>span{
  transform:rotate(45deg)
}

.faq-answer{
  padding:0 35px 22px 0
}

.faq-answer p{
  font-size:.9rem;
  line-height:1.85
}

.contact-section{
  background:#f8f0ed;
  padding:84px 0
}

.contact-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:110px;
  align-items:center
}

.contact-grid h2{
  font-size:clamp(2rem,3.3vw,2.85rem)
}

.contact-grid h2 em{
  color:var(--red)
}

.contact-grid>div:first-child>p:not(.eyebrow){
  margin-top:24px;
  font-size:.96rem;
  max-width:480px;
  line-height:1.9
}

.contact-tags{
  display:flex;
  gap:21px;
  margin-top:27px;
  font-size:.77rem;
  color:#68717b
}

.contact-tags span::before{
  content:'✓';
  color:var(--red);
  margin-right:7px
}

.contact-card{
  background:white;
  border:1px solid #eadfdc;
  border-radius:10px;
  padding:30px
}

.contact-card>p:first-child{
  font-size:.65rem;
  letter-spacing:1.2px;
  margin-bottom:16px
}

.contact-phone,.contact-email{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.contact-phone{
  font-size:1.85rem;
  font-weight:600;
  letter-spacing:-.8px
}

.contact-email{
  font-size:1.08rem;
  margin-top:8px
}

.contact-card a:hover{
  color:var(--red)
}

.contact-phone span,.contact-email span{
  font-size:1.3rem;
  color:#738294;
  font-weight:400
}

.contact-divider{
  height:1px;
  background:var(--line);
  margin:23px 0
}

.contact-card .contact-hint{
  font-size:.83rem;
  line-height:1.85;
  margin-bottom:23px
}

.contact-card .button{
  width:100%;
  font-size:.84rem;
  justify-content:space-between;
  gap:12px;
  white-space:normal
}

.contact-card .button:hover{
  color:#fff
}

.site-footer{
  padding-top:59px;
  background:#fff
}

.footer-main{
  display:grid;
  grid-template-columns:1.15fr 1fr 1.1fr .9fr;
  gap:45px;
  padding-bottom:45px
}

.footer-main>div:first-child p{
  font-size:.8rem;
  line-height:1.8;
  margin-top:17px
}

.footer-main nav{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:11px;
  font-size:.8rem;
  color:#536174
}

.footer-main a:hover{
  color:var(--red)
}

.footer-contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  font-size:.84rem
}

.footer-contact p{
  font-size:.73rem;
  margin-bottom:4px
}

.footer-bottom{
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 0;
  font-size:.66rem;
  color:#6b7784
}

.footer-bottom>a{
  white-space:nowrap
}

dialog{
  width:min(1150px,94vw);
  max-height:94vh;
  padding:15px 20px 20px;
  border:1px solid #d5dce4;
  border-radius:12px;
  box-shadow:0 28px 100px #0006
}

dialog::backdrop{
  background:#071523c4;
  backdrop-filter:blur(5px)
}

.dialog-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:0 0 13px
}

.dialog-top>p{
  font-size:.9rem;
  color:var(--ink);
  font-weight:600
}

.dialog-top>button{
  display:flex;
  align-items:center;
  gap:12px;
  background:#f1f3f5;
  border:1px solid #dce2e8;
  border-radius:6px;
  min-height:42px;
  padding:4px 12px;
  font-size:.82rem
}

.dialog-top>button span{
  font-size:1.7rem
}

#dialog-image{
  width:100%;
  max-height:calc(90vh - 80px);
  object-fit:contain
}


@media(min-width:1500px){
  .hero-grid{
  min-height:645px;
  padding-block:94px
}

.hero-visual{
  width:122%
}

.hero h1{
  font-size:4rem
}


}


@media(max-width:1150px){
  .container{
  width:calc(100% - 64px)
}

.main-nav{
  gap:19px
}

.main-nav .login-link{
  margin-left:8px
}

.hero-grid{
  gap:30px;
  padding-top:72px;
  padding-bottom:76px;
  min-height:550px
}

.hero h1{
  font-size:3.2rem
}

.hero-actions{
  gap:20px;
  flex-wrap:wrap
}

.hero-actions .button{
  font-size:.85rem
}

.hero-lead{
  font-size:1rem
}

.hero-caption{
  left:12px;
  font-size:.66rem
}

.section{
  padding:85px 0
}

.section-heading{
  gap:40px
}

.section-heading>p{
  max-width:320px
}

.workflow-grid{
  grid-template-columns:310px minmax(0,1fr);
  gap:35px
}

.voting-row{
  grid-template-columns:175px 1fr 1fr;
  gap:17px
}

.vote-card{
  padding:23px
}

.broadcast-grid{
  gap:45px
}

.faq-grid{
  gap:45px
}

.contact-grid{
  gap:60px
}

.audience-card{
  padding:27px 24px
}

.device-copy{
  padding:23px
}

.extra-features{
  gap:20px
}


}


@media(max-width:950px){
  .header-inner{
  gap:20px
}

.site-header{
  height:77px
}

.main-nav{
  gap:15px;
  font-size:.8rem
}

.main-nav .button{
  font-size:.75rem;
  padding:8px 12px;
  gap:10px
}

.main-nav .login-link{
  display:none
}

.brand{
  font-size:1.55rem
}

.brand img{
  width:32px;
  height:32px
}

.hero-grid{
  gap:20px
}

.hero h1{
  font-size:2.85rem
}

.hero .eyebrow{
  font-size:.6rem;
  letter-spacing:.7px
}

.hero-actions{
  gap:17px
}

.hero-lead{
  font-size:.94rem
}

.hero-caption{
  max-width:65%;
  bottom:-5px
}

.hero-visual{
  width:123%
}

.hero-phone{
  width:23%;
  right:10%
}

.section-heading{
  gap:35px
}

.section-heading>p{
  max-width:270px;
  font-size:.9rem
}

.audience-card h3{
  font-size:1.2rem
}

.audience-card{
  padding:25px 20px
}

.audience-card>p{
  font-size:.85rem
}

.workflow-grid{
  grid-template-columns:270px minmax(0,1fr);
  gap:27px
}

.workflow-tab{
  gap:12px;
  padding:20px 12px
}

.workflow-tab>span:nth-child(2){
  font-size:.95rem
}

.workflow-tab small{
  font-size:.74rem
}

.voting-row{
  grid-template-columns:150px 1fr 1fr;
  gap:14px
}

.voting-dimension h3{
  font-size:1.03rem
}

.vote-card{
  padding:21px
}

.vote-card h4{
  font-size:1.15rem
}

.vote-card p{
  font-size:.84rem
}

.device-picture{
  height:240px
}

.remote-picture img{
  height:180px
}

.phone-picture img{
  height:240px
}

.device-grid{
  gap:17px
}

.device-copy{
  padding:20px
}

.device-copy h3{
  font-size:1.14rem
}

.broadcast-grid{
  gap:35px
}

.broadcast-visual{
  padding:20px
}

.broadcast-topline{
  font-size:.5rem
}

.broadcast-visual>img{
  height:260px
}

.faq-grid{
  grid-template-columns:1fr 1.15fr;
  gap:35px
}

.contact-grid{
  gap:40px
}

.contact-card{
  padding:24px
}

.contact-phone{
  font-size:1.65rem
}

.footer-main{
  gap:25px
}


}


@media(max-width:760px){
  :root{
  scroll-padding-top:86px
}

.container{
  width:calc(100% - 40px)
}

.site-header{
  height:72px
}

.menu-toggle{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:80px;
  background:transparent;
  border:1px solid #dddeda;
  border-radius:6px;
  padding:7px 12px;
  font-size:.85rem
}

.menu-lines{
  width:17px;
  height:10px;
  border-top:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink)
}

.main-nav{
  display:none;
  position:absolute;
  top:71px;
  left:0;
  right:0;
  background:var(--cream);
  padding:16px 20px 24px;
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 20px #00000008;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  font-size:1rem
}

.main-nav.is-open{
  display:flex
}

.main-nav>a{
  padding:11px 5px;
  min-height:44px
}

.main-nav .login-link{
  display:block;
  margin:0
}

.main-nav .button{
  font-size:.9rem;
  margin-top:12px;
  justify-content:space-between;
  padding:12px 17px
}

.hero-grid{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:37px;
  padding:49px 0 40px
}

.hero h1{
  font-size:clamp(2.8rem,8vw,4rem);
  letter-spacing:-1.7px;
  white-space:normal
}

.hero h1 em{
  letter-spacing:-2px
}

.hero .eyebrow{
  font-size:.57rem;
  letter-spacing:.8px;
  margin-bottom:19px;
  gap:8px
}

.red-dash{
  width:17px
}

.hero-lead{
  font-size:1rem;
  max-width:560px;
  margin-top:23px;
  line-height:1.8
}

.hero-actions{
  margin-top:26px;
  gap:23px;
  flex-wrap:wrap
}

.hero-actions .button{
  font-size:.88rem;
  min-height:50px
}

.hero-actions .text-link{
  font-size:.85rem
}

.hero-footnote{
  margin-top:18px;
  font-size:.78rem
}

.hero-visual{
  width:100%;
  padding-top:32px;
  padding-bottom:47px;
  margin-top:6px
}

.hero-desktop{
  width:94%;
  transform:perspective(1100px) rotateY(-4deg) rotateX(2deg)
}

.hero-phone{
  right:0;
  width:20%;
  bottom:23px
}

.hero-caption{
  left:10px;
  bottom:0;
  max-width:82%;
  font-size:.68rem
}

.visual-label{
  left:5px;
  font-size:.7rem
}

.hero-bottom{
  padding:18px 0;
  gap:20px
}

.hero-bottom>span{
  font-size:.55rem;
  letter-spacing:.9px;
  max-width:58%
}

.hero-bottom a{
  font-size:.71rem;
  gap:9px;
  white-space:nowrap
}

.clients{
  padding:30px 0
}

.client-list{
  flex-wrap:wrap;
  gap:25px 15px;
  justify-content:center;
  padding-top:23px
}

.client-list li{
  flex:0 0 29%;
  font-size:.75rem
}

.client-list strong{
  font-size:.94rem
}

.clients>p{
  font-size:.73rem
}

.section{
  padding:66px 0
}

h2{
  font-size:2.25rem;
  letter-spacing:-1.35px
}

h2 em{
  letter-spacing:-1.4px
}

.eyebrow{
  font-size:.62rem;
  letter-spacing:1.35px;
  margin-bottom:19px
}

.section-heading{
  display:block;
  margin-bottom:33px
}

.section-heading>p{
  max-width:530px;
  font-size:.95rem;
  margin-top:22px;
  line-height:1.85
}

.section-heading .eyebrow{
  margin-bottom:18px
}

.audience-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.audience-card{
  padding:25px 22px
}

.card-index{
  font-size:.57rem;
  margin-bottom:22px;
  letter-spacing:.85px
}

.audience-card h3{
  font-size:1.18rem;
  line-height:1.3
}

.audience-card>p{
  font-size:.86rem
}

.audience-card .client-example{
  font-size:.69rem
}

.workflow-grid{
  display:block
}

.workflow-tabs{
  flex-direction:row;
  gap:8px;
  margin-bottom:23px
}

.workflow-tab{
  display:flex;
  flex:1;
  gap:8px;
  flex-direction:column;
  padding:14px 10px;
  border:1px solid var(--line);
  border-radius:7px
}

.workflow-tab>span:nth-child(2){
  font-size:.81rem
}

.workflow-tab>span:first-child{
  font-size:.69rem
}

.workflow-tab small,.workflow-tab>span:last-child{
  display:none
}

.workflow-note{
  display:none
}

.workflow-panel>p{
  font-size:.87rem
}

.voting .section-heading>p{
  max-width:none
}

.voting-row{
  grid-template-columns:1fr 1fr;
  gap:13px;
  padding:25px 0
}

.voting-dimension{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:30px 1fr;
  align-items:center;
  gap:2px 12px;
  padding:0 0 6px
}

.voting-dimension>span{
  grid-row:1/3;
  margin:0;
  font-size:1.5rem
}

.voting-dimension h3{
  font-size:1.1rem
}

.voting-dimension h3 br{
  display:none
}

.voting-dimension>p{
  margin:0;
  font-size:.73rem
}

.vote-card{
  padding:22px
}

.vote-card h4{
  font-size:1.2rem
}

.vote-card p{
  font-size:.89rem
}

.feature-tag{
  font-size:.67rem
}

.combination-note{
  margin:0 0 34px;
  padding:18px;
  align-items:flex-start
}

.combination-note p{
  font-size:.83rem
}

.extra-features{
  grid-template-columns:1fr 1fr;
  gap:25px
}

.extra-features p{
  font-size:.81rem
}

.availability-note{
  font-size:.7rem;
  line-height:1.8
}

.device-grid{
  grid-template-columns:1fr;
  gap:23px
}

.device-card{
  display:grid;
  grid-template-columns:.8fr 1fr
}

.device-picture{
  height:100%;
  min-height:275px;
  padding:55px 16px 20px
}

.device-label{
  left:16px;
  top:18px;
  font-size:.53rem;
  letter-spacing:.8px
}

.remote-picture img{
  height:195px
}

.tablet-picture img{
  width:110%;
  max-width:none
}

.phone-picture img{
  height:260px;
  align-self:center
}

.device-copy{
  padding:26px
}

.device-copy h3{
  font-size:1.22rem
}

.device-copy p{
  font-size:.9rem
}

.device-detail{
  font-size:.71rem;
  margin-top:20px
}

.device-bottom{
  display:block
}

.device-bottom .text-link{
  margin-top:12px
}

.broadcast-section{
  padding:64px 0
}

.broadcast-grid{
  grid-template-columns:1fr;
  gap:38px
}

.broadcast-copy h2{
  font-size:2.5rem
}

.broadcast-copy{
  max-width:560px
}

.broadcast-lead{
  font-size:1rem
}

.broadcast-detail{
  font-size:.8rem
}

.broadcast-visual{
  max-width:560px;
  width:100%;
  padding:22px 26px
}

.broadcast-topline{
  font-size:.62rem
}

.broadcast-visual>img{
  height:300px
}

.broadcast-visual>p{
  font-size:.69rem
}

.faq-grid{
  display:block
}

.faq-grid>div:first-child>p:last-child{
  margin-top:21px
}

.faq-list{
  margin-top:32px
}

summary{
  font-size:.95rem;
  padding:21px 0
}

.contact-section{
  padding:63px 0
}

.contact-grid{
  display:block
}

.contact-grid h2{
  font-size:2.35rem
}

.contact-grid>div:first-child>p:not(.eyebrow){
  font-size:.93rem
}

.contact-card{
  margin-top:32px;
  padding:27px
}

.contact-phone{
  font-size:1.95rem
}

.contact-card .button{
  font-size:.9rem;
  min-height:51px
}

.contact-card .contact-hint{
  font-size:.85rem
}

.footer-main{
  grid-template-columns:1fr 1fr;
  gap:35px
}

.site-footer{
  padding-top:44px
}

.footer-main nav{
  font-size:.83rem;
  gap:13px
}

.footer-bottom{
  flex-wrap:wrap;
  gap:9px;
  font-size:.67rem
}

.footer-bottom>span{
  display:none
}

.footer-bottom>a{
  margin-left:auto
}

.dialog-top>p{
  font-size:.8rem
}

.dialog-top>button{
  font-size:.73rem
}

.dialog-top{
  gap:10px
}

dialog{
  padding:12px
}


}


@media(max-width:640px){
  .voting-row{
    grid-template-columns:minmax(0,1fr);
    gap:16px
  }

  .vote-card{
    padding:24px
  }
}

@media(max-width:420px){
  .container{
  width:calc(100% - 36px)
}

.hero h1{
  font-size:2.75rem
}

.hero-actions{
  gap:17px
}

.hero-actions .button{
  font-size:.84rem;
  padding:12px 16px;
  gap:16px
}

.hero-actions .text-link{
  font-size:.79rem;
  gap:7px
}

.hero .eyebrow{
  font-size:.52rem
}

.hero-grid{
  padding-top:40px
}

.hero-lead{
  font-size:.95rem
}

.hero-bottom a{
  font-size:.65rem
}

.audience-card{
  padding:22px 16px
}

.audience-card h3{
  font-size:1.05rem
}

.audience-card>p{
  font-size:.82rem
}

.card-index{
  font-size:.53rem;
  letter-spacing:.6px
}

.voting-row{
  grid-template-columns:1fr
}

.voting-dimension{
  grid-column:auto
}

.vote-card{
  padding:24px
}

.device-card{
  display:block
}

.device-picture{
  height:250px;
  min-height:0
}

.device-label{
  left:22px;
  font-size:.62rem
}

.remote-picture img{
  height:185px
}

.tablet-picture img{
  width:85%;
  max-width:320px
}

.phone-picture img{
  height:250px;
  align-self:flex-start
}

.device-copy{
  padding:26px
}

.broadcast-topline{
  font-size:.5rem
}

.broadcast-visual>img{
  height:240px
}

.contact-grid h2{
  font-size:2.15rem
}

.contact-phone{
  font-size:1.75rem
}

.contact-card{
  padding:24px
}

.footer-main{
  gap:30px 20px
}

.hero-caption{
  font-size:.63rem
}


}


@media(prefers-reduced-motion:reduce){
  :root{
  scroll-behavior:auto
}

*,*::before,*::after{
  animation:none!important;
  transition:none!important
}

.button:hover{
  transform:none
}


}


@media print{
  .site-header,.hero-visual,.clients,.workflow-controls,.device-picture,.broadcast-visual,.site-footer,.contact-tags,.button,dialog{
  display:none!important
}

.container{
  width:100%
}

.section,.broadcast-section,.contact-section{
  padding:25px 0;
  background:white;
  color:#102239
}

.hero-grid,.section-heading,.workflow-grid,.broadcast-grid,.faq-grid,.contact-grid{
  display:block;
  min-height:0;
  padding:0
}

.hero{
  background:white
}

.hero h1{
  font-size:30pt
}

.hero-bottom{
  display:none
}

.hero-lead{
  max-width:none
}

.voting-row{
  break-inside:avoid
}

.broadcast-section p,.broadcast-section li{
  color:#333
}

.contact-card{
  margin-top:15px
}

h2{
  font-size:22pt
}


}


/* Keep explanatory product copy comfortable to read on every screen. */
.audience-card>p:not(.client-example),.vote-card p,.device-copy p,.workflow-panel>p,.faq-answer p,.extra-features p{
  font-size:1rem
}


.contact-card .contact-hint,.broadcast-detail,.device-detail{
  font-size:.875rem
}


@media(max-width:360px){
  .hero h1{
  font-size:2.3rem
}

.hero h1 em{
  font-size:1em;
  letter-spacing:-1.7px
}

.hero .eyebrow{
  letter-spacing:.3px
}

.hero-actions .button{
  width:100%;
  justify-content:space-between
}

.hero-actions{
  gap:14px
}

.hero-grid{
  gap:29px
}


}


@media(max-width:520px){
  .audience-grid{
  grid-template-columns:1fr
}

.audience-card{
  padding:27px
}

.audience-card h3{
  font-size:1.35rem
}

.audience-card h3 br{
  display:none
}

.card-index{
  font-size:.65rem;
  margin-bottom:18px
}

.audience-card .client-example{
  font-size:.75rem
}

.extra-features{
  gap:25px 18px
}


}



/* Match the presentation crop to the contemporary device frames. */
.hero-phone, .phone-picture img { clip-path: inset(.45% 1.15% .8% 1.15% round 16% / 8%); }
.tablet-picture img { clip-path: inset(1.4% .95% round 5% / 7%); }
.device-screenshot, .results-screenshot { background: #fff; }

/* Direct IP-camera streaming */
.broadcast-direct { background: #edf2f6; color: var(--ink); }
.broadcast-direct .broadcast-copy .eyebrow { color: #52647a; }
.broadcast-direct .broadcast-copy h2 em { color: #536b86; }
.broadcast-direct .broadcast-lead { color: #3c526b; }
.broadcast-direct .broadcast-benefits { color: #253f59; font-size: 1rem; }
.broadcast-direct .broadcast-benefits li::before { color: #377654; }
.broadcast-direct .broadcast-detail { color: #52647a; }
.broadcast-direct .broadcast-visual { background: #f8fafc; border-color: #d9e2eb; padding: 24px 28px; }
.broadcast-direct .broadcast-topline { color: #53677d; font-size: .75rem; letter-spacing: .75px; }
.broadcast-direct .broadcast-visual > img { height: 300px; margin: 12px auto 20px; object-fit: contain; }
.broadcast-direct .broadcast-route { color: #243e58; border-top-color: #d9e2eb; gap: 8px; font-size: .875rem; line-height: 1.4; }
.broadcast-direct .broadcast-route > span { text-align: center; }
.broadcast-direct .broadcast-route .route-protocol { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #4b657f; }
.route-protocol small { font-size: .65rem; letter-spacing: .1px; white-space: nowrap; }
.route-protocol > span { font-size: 1.5rem; line-height: 1; }
.broadcast-direct .broadcast-visual > p { color: #596e83; font-size: .75rem; }
/* Information security: certificate, backups and infrastructure */
.security-section { background: #fff; }
.security-section .section-heading > p { max-width: 360px; }
.security-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.security-card { display: flex; flex-direction: column; padding: 30px; border: 1px solid #dfe5e9; border-radius: 10px; background: #fff; }
.security-iso { background: #f7f9fb; }
.security-brand { display: flex; align-items: center; height: 76px; margin-bottom: 25px; }
.security-brand img { max-height: 62px; object-fit: contain; object-position: left center; }
.security-brand .veeam-logo { width: 150px; height: auto; }
.security-brand .cloudflare-logo { width: 198px; height: auto; }
.iso-standard { display: flex; flex-direction: column; gap: 7px; color: #1b3a58; }
.iso-standard strong { font-size: 1.7rem; line-height: 1.1; letter-spacing: -.8px; }
.iso-standard > span { font-size: .65rem; font-weight: 650; letter-spacing: 1px; }
.security-card h3 { font-size: 1.22rem; margin-bottom: 18px; line-height: 1.3; }
.security-card > p { font-size: 1rem; line-height: 1.85; }
.security-card > p + p { margin-top: 15px; margin-bottom: 24px; }
.security-card strong { font-weight: 600; }
.security-caption { display: block; margin-top: auto; border-top: 1px solid #dfe5e9; padding-top: 20px; color: #5e7182; font-size: .875rem; line-height: 1.7; }
.certificate-link { display: flex; align-items: center; gap: 15px; width: 100%; margin-top: auto; padding: 18px 0 0; border: 0; border-top: 1px solid #dce3e9; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.certificate-link > img { flex-shrink: 0; width: 51px; height: auto; box-shadow: 0 3px 8px #10223918; }
.certificate-link > span { flex: 1; }
.certificate-link strong { display: block; color: var(--red); font-size: .9rem; }
.certificate-link small { display: block; font-size: .75rem; color: #586b7d; margin-top: 7px; line-height: 1.6; }
.certificate-link:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.security-access { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 32px; padding-top: 31px; border-top: 1px solid #e1e7eb; }
.security-access > div { display: flex; gap: 15px; align-items: flex-start; }
.security-access .check { margin-top: 2px; }
.security-access h3 { font-size: 1.05rem; line-height: 1.45; margin-bottom: 9px; }
.security-access p { font-size: .94rem; line-height: 1.85; }
/* eSesja product recommendation */
.esesja-section { padding: 68px 0; color: #fff; background: #102239; }
.esesja-grid { display: grid; grid-template-columns: 1.4fr .6fr; align-items: center; gap: 85px; }
.esesja-copy .eyebrow { color: #b8c9da; font-size: .75rem; }
.esesja-copy h2 { font-size: clamp(2.15rem, 3.15vw, 2.85rem); }
.esesja-copy h2 em { color: #d4e1ec; }
.esesja-copy > p:last-child { color: #c6d2de; max-width: 620px; font-size: 1rem; line-height: 1.85; margin-top: 24px; }
.esesja-action { display: flex; flex-direction: column; align-items: stretch; gap: 22px; }
.esesja-logo-surface { display: flex; justify-content: center; padding: 0 22px 8px; }
.esesja-logo-surface img { width: 220px; height: auto; }
.esesja-action .button { font-size: .9rem; gap: 22px; }
.esesja-action > span { text-align: center; font-size: .75rem; color: #b4c5d6; }
@media (max-width: 1200px) and (min-width: 1041px) {
  .main-nav { gap: 17px; }
  .main-nav .login-link { display: none; }
}
@media (max-width: 1040px) {
  .site-header { height: 72px; }
  .menu-toggle { display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 44px; min-width: 80px; background: transparent; border: 1px solid #dddeda; border-radius: 6px; padding: 7px 12px; font-size: .875rem; }
  .menu-lines { width: 17px; height: 10px; border-top: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); }
  .main-nav { display: none; position: absolute; top: 71px; left: 0; right: 0; background: var(--cream); padding: 16px 24px 24px; border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px #00000008; flex-direction: column; align-items: stretch; gap: 0; font-size: 1rem; }
  .main-nav.is-open { display: flex; }
  .main-nav > a { padding: 11px 5px; min-height: 44px; }
  .main-nav .login-link { display: block; margin: 0; }
  .main-nav .button { font-size: .9rem; margin-top: 12px; justify-content: space-between; padding: 12px 17px; }
  .security-grid { gap: 16px; }
  .security-card { padding: 24px; }
  .security-card h3 { font-size: 1.13rem; }
  .iso-standard strong { font-size: 1.35rem; }
  .iso-standard > span { font-size: .57rem; letter-spacing: .6px; }
  .certificate-link { align-items: flex-start; }
  .certificate-link strong { font-size: .8rem; }
  .certificate-link > img { width: 40px; }
  .esesja-grid { grid-template-columns: 1.25fr .75fr; gap: 42px; }
}
@media (max-width: 850px) {
  .security-grid { grid-template-columns: 1fr; gap: 20px; }
  .security-card { padding: 28px; }
  .security-brand { height: 57px; margin-bottom: 24px; }
  .security-card h3 { font-size: 1.3rem; }
  .iso-standard strong { font-size: 1.8rem; }
  .iso-standard > span { font-size: .65rem; }
  .security-card > p { max-width: 650px; }
  .certificate-link { align-items: center; }
  .certificate-link > img { width: 48px; }
  .certificate-link strong { font-size: .94rem; }
  .security-access { gap: 28px; }
  .esesja-grid { grid-template-columns: 1fr; gap: 38px; }
  .esesja-action { align-items: flex-start; gap: 20px; }
  .esesja-logo-surface { padding: 0; }
  .esesja-logo-surface img { width: 180px; }
  .esesja-action > span { text-align: left; }
}
@media (max-width: 600px) {
  .broadcast-direct .broadcast-visual { padding: 21px; }
  .broadcast-direct .broadcast-topline { font-size: .64rem; }
  .broadcast-direct .broadcast-route { font-size: .75rem; gap: 6px; }
  .broadcast-direct .broadcast-visual > img { height: 260px; }
  .route-protocol small { font-size: .57rem; }
  .broadcast-direct .broadcast-visual > p { font-size: .75rem; }
  .security-access { grid-template-columns: 1fr; }
  .esesja-section { padding: 55px 0; }
  .esesja-copy h2 { font-size: 2.1rem; }
  .security-section h2 { font-size: 2.1rem; }
  .security-card { padding: 25px; }
}
@media print {
  .broadcast-direct, .esesja-section { background: white; color: #102239; padding: 25px 0; }
  .esesja-action, .certificate-link > img { display: none; }
  .esesja-copy > p:last-child, .esesja-copy .eyebrow, .esesja-copy h2 em { color: #333; }
  .security-card { break-inside: avoid; }
}

/* Login destination chooser, using the real public login screens. */
.login-dialog { width: min(960px, calc(100vw - 40px)); max-height: min(94vh, 900px); max-height: min(94dvh, 900px); padding: 0; color: var(--ink); background: #f6f8fa; border: 1px solid #dce3eb; border-radius: 18px; overscroll-behavior: contain; }
.login-heading { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 30px 34px 26px; background: #fff; border-bottom: 1px solid #e0e6ec; }
.login-heading .eyebrow { margin-bottom: 10px; font-size: .75rem; color: #6b7887; }
.login-heading h2 { font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -1px; }
.login-heading h2 em { letter-spacing: -1px; }
#login-description { margin-top: 12px; font-size: 1rem; }
.login-close { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #e0e6ec; border-radius: 50%; background: #f6f8fa; line-height: 1; }
.login-close span { font-size: 1.8rem; font-weight: 400; }
.login-close:hover { background: #e8edf2; }
.login-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; padding: 26px 34px 0; }
.login-choice { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #dce3eb; border-radius: 12px; box-shadow: 0 3px 8px #10223904; transition: border-color .2s, box-shadow .2s; }
.login-choice:hover { border-color: #9aabba; box-shadow: 0 8px 24px #1022390e; }
.login-choice-app:hover { border-color: #da8392; }
.login-choice-image { aspect-ratio: 16 / 9; background: #102239; border-bottom: 1px solid #e0e6ec; }
.login-choice-image img { width: 100%; height: 100%; object-fit: contain; }
.login-choice-copy { display: flex; flex: 1; flex-direction: column; padding: 22px; }
.login-role { font-size: .75rem; font-weight: 650; letter-spacing: .65px; color: #49637e; margin-bottom: 10px; }
.login-choice-app .login-role { color: #b92944; }
.login-choice h3 { font-size: clamp(1.16rem, 2vw, 1.4rem); line-height: 1.25; letter-spacing: -.4px; margin-bottom: 11px; }
.login-choice h3 + p { font-size: 1rem; line-height: 1.7; margin-bottom: 15px; }
.login-destination { display: block; margin-top: auto; color: #5d6f82; font-size: .875rem; }
.login-choice-action { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 48px; margin-top: 20px; padding: 11px 16px; border-radius: 7px; background: var(--ink); color: #fff; font-size: .94rem; font-weight: 600; }
.login-choice-app .login-choice-action { background: var(--red); }
.login-choice:hover .login-choice-action { background: #213e5c; }
.login-choice-app:hover .login-choice-action { background: var(--red-dark); }
.login-help { padding: 20px 34px 24px; font-size: .875rem; line-height: 1.7; text-align: center; color: #5b6b7d; }
@media (max-width: 640px) {
  .login-dialog { width: calc(100vw - 24px); border-radius: 14px; }
  .login-heading { gap: 12px; padding: 23px 20px 20px; }
  .login-heading h2 { font-size: 1.9rem; }
  #login-description { font-size: .94rem; }
  .login-close { flex-basis: 40px; width: 40px; height: 40px; }
  .login-choices { grid-template-columns: 1fr; padding: 20px 20px 0; gap: 20px; }
  .login-choice h3 { font-size: 1.35rem; }
  .login-choice-copy { padding: 20px; }
  .login-help { padding: 18px 20px 22px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .login-choice { transition: none; }
}