/* Comfortable reading size, with a wider canvas on desktop. */
.sidebar>*{flex-shrink:0}
.sidebar-bottom{display:flex;flex-direction:column;flex:0 0 auto;gap:16px;margin-top:auto;padding-top:clamp(24px,4vh,64px)}
.sidebar-bottom>.help-mini{flex:0 0 auto;margin:0}
.sidebar-bottom>.nav,.sidebar-bottom>.guest-mini{flex:0 0 auto}
.sidebar-bottom>.guest-mini{margin-top:0}
.notification-controls{margin-top:18px}.notification-controls h3{margin-top:0}.notification-controls .setting-row{flex-wrap:wrap;gap:12px}.notification-controls .setting-row p{margin:0}.notification-controls .small{margin-bottom:0}
.presence-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:28px}.presence-panel h3{margin:16px 0 4px}.presence-panel p{max-width:75ch}.presence-panel>.btn{flex-shrink:0}.presence-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:7px}.queue-card{border:1px solid #825334;background:#ff5b160b;border-radius:12px;padding:20px;margin:0 0 22px}.queue-card p{font-size:14px;line-height:1.75}.queue-card small{display:block;color:var(--muted);line-height:1.65}.queue-place{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0}.queue-place strong{color:var(--orange);font-size:38px;line-height:1}.queue-row-place{color:var(--orange)!important}@media(max-width:720px){.presence-panel{align-items:stretch;flex-direction:column;gap:12px}.presence-panel>.btn{align-self:flex-start}.queue-card{padding:17px}.queue-place strong{font-size:32px}}@media(min-width:3000px){.queue-card p{font-size:18px}.queue-place strong{font-size:48px}.queue-card small{font-size:16px}}
body{font-size:15px;line-height:1.55}
.content{width:100%;max-width:2240px;padding:38px clamp(24px,3vw,64px) 28px}
.page-title{font-size:clamp(28px,2vw,38px);line-height:1.25}
.page-sub{font-size:15px;max-width:80ch;line-height:1.75}
.welcome h1{font-size:clamp(28px,2.1vw,38px);line-height:1.25}
.welcome p{font-size:15px;line-height:1.75}.welcome{margin-bottom:26px}
.nav button{font-size:14px;min-height:48px}.nav-label{font-size:11px}.brand-sub{font-size:8px}
.topbar{height:80px;padding:0 clamp(24px,3vw,64px)}
.crumb{font-size:13px}.signin{font-size:13px;min-height:42px;padding:10px 18px}
.language{font-size:13px;min-width:64px;min-height:44px}
.btn{font-size:14px;min-height:46px;padding:13px 20px}.small{font-size:13px;line-height:1.75}
label{font-size:14px}input,textarea,select{font-size:16px}textarea{line-height:1.65}
.panel{padding:28px}.setting-row h3{font-size:16px}.setting-row p{font-size:13px}
.hero-grid{grid-template-columns:minmax(0,3.3fr) minmax(260px,1fr);gap:22px}
.hero{min-height:470px;padding:clamp(30px,2.6vw,52px)}
.hero-copy{width:64%;position:relative;z-index:2}
.hero h2{font-size:clamp(32px,2.5vw,54px);line-height:1.28;margin:27px 0 23px}
.hero p{font-size:16px;line-height:1.8;max-width:440px;margin-bottom:30px}
.hero .eyebrow{font-size:11px}.hero-note{font-size:12px;line-height:1.7}
.hero-art{width:38%;height:90%;top:5%;right:1%}.hero-art img{width:100%;max-width:340px}
.next-card{padding:28px}.next-card h3{font-size:24px;line-height:1.4}.next-card p{font-size:14px;line-height:1.8}
.next-card li{font-size:13px}.next-card .eyebrow{font-size:11px}
.benefits{padding:26px 0}.benefit{font-size:13px;gap:10px}
.section-head{margin-top:30px}.section-head h2{font-size:22px}.section-head>span{font-size:10px}
.steps-grid{gap:18px}.step-card{padding:28px;min-height:225px}
.step-card h3{font-size:17px;line-height:1.45;margin-top:52px}
.step-card p{font-size:14px;line-height:1.8;max-width:85%}.step-card img{width:85px;height:85px}
.step-card .number{font-size:13px}.bottom-card{padding:24px}.bottom-card h3{font-size:15px}.bottom-card p{font-size:13px}
.ticket-row{min-height:98px;padding:20px;gap:16px}.ticket-info h3{font-size:16px;line-height:1.5}.ticket-info small{font-size:12px}
.badge{font-size:11px;padding:7px 11px;white-space:nowrap}.tabs{gap:6px;flex-wrap:wrap}.tabs button{min-height:42px;font-size:13px}
.chat{max-height:min(62vh,720px)}.message{font-size:15px;line-height:1.75}.message small{font-size:12px}
.message{max-width:min(90%,85ch);overflow-wrap:anywhere}
.stat b{font-size:32px}.stat>span{font-size:13px}.table-wrap table{font-size:14px}.table-wrap th,.table-wrap td{padding:17px 14px}
.footer{font-size:12px;line-height:1.8;margin-top:34px}.footer-links button,.footer-links a{font-size:12px}
.footer-links a{color:var(--muted);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}.footer-links a:hover{color:var(--orange)}
dialog{width:min(580px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow-y:auto;padding:30px}
.modal-body>p{font-size:15px;line-height:1.8}.modal-top h2{font-size:25px}
@media(min-width:1800px){
  .sidebar{width:260px;padding:35px 24px 24px}.main{margin-left:260px}
  .brand{font-size:23px}.brand-sub{margin-left:46px}.nav button{font-size:15px;min-height:52px}
  .hero{min-height:530px}.hero h2{font-size:clamp(46px,2.6vw,62px)}
  .hero p{font-size:18px;max-width:480px}.hero-art img{max-width:400px}
  .hero .btn{min-height:52px;font-size:16px;padding:15px 24px}
  .step-card{min-height:255px;padding:32px}.step-card h3{font-size:19px}.step-card p{font-size:15px}
  .next-card h3{font-size:27px}.next-card p{font-size:15px}.benefit{font-size:14px}
}
@media(max-width:1400px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}.next-card{display:none}
  .hero{min-height:420px}.hero-copy{width:65%}.hero-art{width:34%}
  .ticket-layout{grid-template-columns:minmax(0,1.5fr) minmax(290px,1fr)}
}
@media(max-width:1100px){
  .main{margin-left:0}.content{max-width:1100px;padding:28px 28px 100px}
  .topbar{height:72px;padding:0 24px}.hero{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:20px;padding:32px;min-height:0}
  .hero-copy{width:100%}.hero-art{position:relative;inset:auto;width:210px;height:240px}
  .hero h2{font-size:clamp(30px,4.4vw,42px)}.hero p{font-size:15px;max-width:100%}
  .hero-note{font-size:11px}.hero-art img{width:200px}
  .step-card{min-height:225px;padding:24px}.step-card h3{font-size:16px}.step-card p{font-size:13px;max-width:100%}
  .step-card img{width:60px;height:60px;right:12px;top:12px}
  .ticket-layout{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:720px){
  .content{padding:24px 18px 96px}.topbar{padding:0 14px;gap:8px}.crumb strong{max-width:145px;font-size:12px}
  .top-actions{gap:4px;flex-shrink:0}.signin{font-size:12px;padding:9px 12px;white-space:nowrap;flex-shrink:0}.language{min-width:58px}
  .welcome h1{font-size:27px}.welcome p,.page-sub{font-size:14px}.welcome{margin-bottom:22px}
  .hero{grid-template-columns:minmax(0,1fr);padding:26px;gap:14px}.hero h2{font-size:clamp(28px,7vw,39px);letter-spacing:-1px}
  .hero p{font-size:15px;max-width:100%}.hero .btn{max-width:100%;min-height:48px}
  .hero-art{width:100%;height:165px;justify-self:center}.hero-art img{width:160px}.hero-note{max-width:100%}
  .benefits{grid-template-columns:minmax(0,1fr);gap:14px;padding:22px 0}.benefit{font-size:13px}
  .steps-grid{grid-template-columns:minmax(0,1fr);gap:12px}.step-card{min-height:155px;padding:22px 95px 22px 22px}
  .step-card h3{font-size:16px;margin-top:18px}.step-card p{font-size:13px;max-width:100%}.step-card img{top:34px;right:16px;width:65px;height:65px}
  .section-head h2{font-size:20px}.section-head>span{max-width:90px}
  .panel{padding:22px}.ticket-row{padding:17px 14px;min-height:90px;gap:10px}.ticket-info h3{font-size:14px}.ticket-info small{font-size:11px}
  .badge{font-size:10px;padding:6px 9px}.ticket-layout .panel{padding:20px}.message{font-size:14px}
  .stat{padding:17px}.stat b{font-size:28px}.stat>span{font-size:12px}
  .form-actions{flex-wrap:wrap;gap:12px}.setting-row{gap:14px}.setting-row h3{font-size:15px}
  .pagination{gap:12px}.pagination>span{flex:1;min-width:140px}
  dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:23px}.modal-top h2{font-size:23px}
}
@media(max-width:380px){
  .content{padding-left:12px;padding-right:12px}.topbar{padding:0 10px}.crumb strong{max-width:105px}
  .top-actions{gap:0}.top-actions>.notification{display:none}.signin{padding:9px 10px;font-size:11px}
  .hero{padding:23px}.hero h2{font-size:28px}.hero-note{font-size:11px}
  .step-card{padding:20px 75px 20px 20px}.step-card img{width:48px;height:48px;right:12px}
  .ticket-row{flex-wrap:wrap}.ticket-row .ticket-info{flex:1;min-width:140px}
  .setting-row{flex-wrap:wrap}.panel{padding:18px}.pagination{align-items:flex-start}
}
@media(min-width:3000px){
  body{font-size:19px}.sidebar{width:310px;padding:40px 28px 30px}.main{margin-left:310px}
  .content{max-width:3300px;padding:52px clamp(72px,3vw,120px) 40px}
  .brand{font-size:28px}.brand-sub{font-size:10px;margin-left:48px}.nav-label{font-size:13px}
  .nav button{font-size:18px;min-height:64px;padding:18px}.nav .icon{width:22px;height:22px}
  .guest-mini b{font-size:15px}.guest-mini small{font-size:10px}.help-mini h4{font-size:18px}.help-mini p,.mini-link{font-size:15px}
  .topbar{height:96px;padding:0 72px}.crumb{font-size:16px}.prototype{font-size:11px}
  .signin{font-size:16px;min-height:50px;padding:13px 24px}.language{font-size:16px;min-height:50px;min-width:76px}
  .icon-button{min-width:50px;min-height:50px}.icon-button .icon{width:22px;height:22px}
  .welcome h1,.page-title{font-size:46px}.welcome p,.page-sub{font-size:20px}.welcome{margin-bottom:34px}
  .hero-grid{gap:28px;grid-template-columns:minmax(0,3.3fr) minmax(460px,1fr)}
  .hero{min-height:660px;padding:62px}.hero h2{font-size:clamp(72px,2.3vw,96px);margin:32px 0}
  .hero p{font-size:22px;max-width:660px;line-height:1.8;margin-bottom:38px}
  .hero-art img{max-width:540px}.hero .eyebrow{font-size:14px}.hero-note{font-size:15px}
  .btn,.hero .btn{font-size:18px;min-height:58px;padding:17px 27px}
  .next-card{padding:40px}.next-card h3{font-size:34px}.next-card p{font-size:20px}.next-card li{font-size:17px}.next-card .eyebrow{font-size:14px}
  .benefits{padding:34px 0}.benefit{font-size:17px}.section-head{margin-top:38px}.section-head h2{font-size:29px}.section-head>span{font-size:13px}
  .steps-grid{gap:24px}.step-card{padding:38px;min-height:310px}.step-card h3{font-size:24px;margin-top:65px}
  .step-card p{font-size:18px;max-width:50ch}.step-card img{width:112px;height:112px}.step-card .number{font-size:16px}
  .bottom-card{padding:30px}.bottom-card h3{font-size:19px}.bottom-card p{font-size:17px}
  .panel{padding:36px}.small,.setting-row p{font-size:16px}.setting-row h3{font-size:21px}
  label{font-size:18px}input,textarea,select{font-size:20px}.tabs button{font-size:17px;min-height:50px}
  .stat b{font-size:48px}.stat>span{font-size:17px}.stat{padding:32px}
  .ticket-row{min-height:124px;padding:26px}.ticket-info h3{font-size:21px}.ticket-info small{font-size:15px}.badge{font-size:14px;padding:9px 14px}
  .message{font-size:19px}.message small{font-size:15px}.chat{max-height:min(65vh,1050px)}
  .table-wrap table{font-size:18px}.table-wrap th,.table-wrap td{padding:22px 18px}
  .footer,.footer-links button,.footer-links a{font-size:15px}.footer{margin-top:45px}
  dialog{width:min(740px,calc(100vw - 48px));padding:40px}.modal-top h2{font-size:32px}.modal-body>p{font-size:19px}
  .btn.oauth-button{font-size:17px;min-height:52px}
}