/*
  Cybaaspace refined UI pass
  Goal: less boxy, more premium cloud-platform styling, while preserving all existing PHP/UI functionality.
  Loaded after the legacy/dark guard styles.
*/
:root{
  --csp-bg-deep:#050b14;
  --csp-bg:#07111f;
  --csp-panel:rgba(10,23,42,.78);
  --csp-panel-2:rgba(9,20,38,.62);
  --csp-surface:rgba(12,27,50,.72);
  --csp-surface-hover:rgba(15,34,62,.88);
  --csp-hairline:rgba(130,177,235,.115);
  --csp-hairline-2:rgba(130,177,235,.18);
  --csp-text:#f6f9ff;
  --csp-muted:#aabbd1;
  --csp-muted-2:#7f95b0;
  --csp-blue:#1297ff;
  --csp-blue-2:#2563ff;
  --csp-cyan:#39d5ff;
  --csp-violet:#7657ff;
  --csp-green:#45e889;
  --csp-red:#ff5e73;
  --csp-orange:#ffb454;
  --csp-radius-lg:28px;
  --csp-radius-md:18px;
  --csp-radius-sm:12px;
  --csp-shadow-soft:0 24px 80px rgba(0,0,0,.28);
  --csp-shadow-panel:0 18px 48px rgba(0,0,0,.22);
  --csp-glow:0 0 0 1px rgba(98,170,255,.12),0 30px 90px rgba(0,0,0,.32);
  color-scheme:dark;
}

/* Base: reduce hard lines and replace repetitive boxes with subtle layered surfaces */
html body{
  background:
    radial-gradient(circle at 18% -8%, rgba(18,151,255,.13), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(118,87,255,.12), transparent 28rem),
    radial-gradient(circle at 50% 100%, rgba(57,213,255,.055), transparent 36rem),
    linear-gradient(180deg,var(--csp-bg-deep),var(--csp-bg) 48%,#050a12)!important;
  color:var(--csp-text)!important;
  font-feature-settings:"cv02","cv03","cv04","cv11"!important;
}
html body::before{
  opacity:.16!important;
  background-image:
    radial-gradient(circle, rgba(97,151,221,.22) 1px, transparent 1.4px),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px)!important;
  background-size:42px 42px,96px 96px,96px 96px!important;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.72),transparent 75%)!important;
}

/* Corrected top navigation: no fake brand text, no overlap, consistent padding */
html body .topbar{
  position:sticky!important;
  top:0!important;
  z-index:60!important;
  height:auto!important;
  background:rgba(5,12,23,.82)!important;
  border-bottom:0!important;
  box-shadow:0 1px 0 rgba(130,177,235,.10),0 18px 42px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(22px) saturate(140%)!important;
}
html body .topbar:after{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(18,151,255,.36),rgba(118,87,255,.28),transparent)!important;
}
html body .topbar-inner{
  width:min(1540px,calc(100% - 56px))!important;
  min-height:72px!important;
  margin-inline:auto!important;
  display:grid!important;
  grid-template-columns:minmax(170px,auto) minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:26px!important;
  padding:0!important;
}
html body .brand-link{
  position:relative!important;
  min-width:170px!important;
  max-width:230px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  flex:0 0 auto!important;
}
html body .brand-link:after{content:none!important;display:none!important;}
html body .brand-logo{
  display:block!important;
  max-width:178px!important;
  width:auto!important;
  height:46px!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:drop-shadow(0 8px 18px rgba(18,151,255,.12))!important;
}
html body .public-nav{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:8px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
html body .top-link{
  min-height:42px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border-radius:999px!important;
  color:#d6e0f0!important;
  background:transparent!important;
  border:1px solid transparent!important;
  font-size:.94rem!important;
  line-height:1!important;
  font-weight:820!important;
  letter-spacing:-.01em!important;
  box-shadow:none!important;
  transform:none!important;
}
html body .top-link .nav-ico{
  width:18px!important;
  height:18px!important;
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 18px!important;
  border-radius:7px!important;
  background:transparent!important;
  color:#9ab4d5!important;
  font-size:.9rem!important;
  opacity:.95!important;
}
html body .top-link:hover,
html body .top-link.active{
  background:linear-gradient(135deg,rgba(18,151,255,.18),rgba(37,99,255,.16))!important;
  border-color:rgba(130,177,235,.16)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 12px 28px rgba(0,0,0,.18)!important;
}
html body .top-link:hover .nav-ico,
html body .top-link.active .nav-ico{color:#fff!important;}
html body .top-actions{
  min-width:max-content!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
  flex:0 0 auto!important;
}
html body .language-switcher,
html body .flag-language-switcher{
  height:42px!important;
  padding:0 7px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  border-radius:999px!important;
  background:rgba(9,21,40,.74)!important;
  border:1px solid rgba(130,177,235,.14)!important;
  box-shadow:none!important;
}
html body .language-flag{
  height:30px!important;
  padding:0 8px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  border-radius:999px!important;
  color:#cbd8e9!important;
  font-weight:830!important;
  font-size:.82rem!important;
  border:0!important;
  background:transparent!important;
}
html body .language-flag.active{
  background:rgba(18,151,255,.16)!important;
  color:#fff!important;
}
html body .language-flag img{
  width:22px!important;
  height:16px!important;
  border-radius:3px!important;
  object-fit:cover!important;
}
html body .wallet-chip{
  height:42px!important;
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,rgba(18,151,255,.16),rgba(37,99,255,.10))!important;
  border:1px solid rgba(18,151,255,.28)!important;
  color:#86d6ff!important;
  font-size:.95rem!important;
  font-weight:900!important;
  box-shadow:0 12px 34px rgba(18,151,255,.10)!important;
}
html body .wallet-chip:before{
  content:"";
  width:16px;
  height:16px;
  margin-right:9px;
  border-radius:5px;
  background:linear-gradient(135deg,var(--csp-blue),var(--csp-blue-2));
  box-shadow:0 0 18px rgba(18,151,255,.35);
  mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 7.5A2.5 2.5 0 0 1 6.5 5H18a2 2 0 0 1 2 2v1h-4.5A3.5 3.5 0 0 0 12 11.5v1A3.5 3.5 0 0 0 15.5 16H20v1a2 2 0 0 1-2 2H6.5A2.5 2.5 0 0 1 4 16.5v-9Zm11.5 2H21v5h-5.5A1.5 1.5 0 0 1 14 13v-1a1.5 1.5 0 0 1 1.5-1.5Zm1.25 1.75a.75.75 0 1 0 0 1.5a.75.75 0 0 0 0-1.5Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
html body .icon-btn{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  border-radius:13px!important;
  display:inline-grid!important;
  place-items:center!important;
  background:rgba(8,18,34,.70)!important;
  color:#d9e7f9!important;
  border:1px solid rgba(130,177,235,.14)!important;
  box-shadow:none!important;
}
html body .icon-btn:hover{
  background:rgba(18,151,255,.13)!important;
  color:#fff!important;
  border-color:rgba(18,151,255,.25)!important;
}
html body .icon-btn.dashboard-shortcut{
  background:linear-gradient(135deg,rgba(18,151,255,.24),rgba(37,99,255,.18))!important;
  color:#a9e2ff!important;
  border-color:rgba(18,151,255,.26)!important;
}

/* Page layout rhythm */
html body main.container,
html body .app-shell{
  width:min(1540px,calc(100% - 56px))!important;
}
html body .app-shell{
  gap:26px!important;
  padding-top:28px!important;
  grid-template-columns:280px minmax(0,1fr)!important;
}
html body .app-content{min-width:0!important;}

/* Softer dashboard/sidebar styling */
html body .dashboard-sidebar,
html body .admin-side,
html body .sidebar,
html body .side-panel{
  border:0!important;
  border-radius:28px!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(18,151,255,.10),transparent 40%),
    linear-gradient(180deg,rgba(9,21,40,.78),rgba(6,15,29,.62))!important;
  box-shadow:var(--csp-shadow-panel)!important;
  outline:1px solid rgba(130,177,235,.10)!important;
  overflow:hidden!important;
}
html body .sidebar-title,
html body .side-section-title{
  border-bottom:1px solid rgba(130,177,235,.08)!important;
  padding-bottom:14px!important;
}
html body .side-link{
  min-height:44px!important;
  border-radius:15px!important;
  border:0!important;
  color:#bacbe1!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body .side-link:hover,
html body .side-link.active{
  color:#fff!important;
  background:linear-gradient(135deg,rgba(18,151,255,.15),rgba(118,87,255,.10))!important;
  transform:translateX(2px)!important;
}
html body .side-ico{
  border:0!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
  color:#86d6ff!important;
}
html body .side-link.active .side-ico{
  background:linear-gradient(135deg,var(--csp-blue),var(--csp-blue-2))!important;
  color:#fff!important;
}

/* Less boxy cards everywhere: no heavy outlines, layered panels instead */
html body :where(.card,.panel,.clean-panel,.status-card,.admin-table-card,.admin-form-card,.service-table-card,.hero-product-card,.featured-card,.kpi,.metric,.modal-card,.modal-content,.modal-panel,.ticket-message,.bubble,.faq details,.private-vlan-card,.resource-box,.cms-template-card,.cms-editor-card,.api-endpoint,.api-doc-card,.datacenter-map-card,.cta-band){
  border:0!important;
  outline:1px solid var(--csp-hairline)!important;
  border-radius:var(--csp-radius-lg)!important;
  background:
    linear-gradient(180deg,rgba(13,29,53,.72),rgba(7,17,32,.70))!important;
  box-shadow:var(--csp-shadow-panel)!important;
}
html body :where(.card,.panel,.clean-panel,.status-card,.admin-table-card,.admin-form-card,.service-table-card,.hero-product-card,.featured-card,.kpi,.metric,.modal-card,.modal-content,.modal-panel,.faq details):hover{
  outline-color:rgba(130,177,235,.17)!important;
}
html body :where(.card h1,.card h2,.card h3,.panel h1,.panel h2,.panel h3,.kpi strong,.metric b){
  letter-spacing:-.035em!important;
}
html body :where(.muted,.lead,.card p,.panel p,small,.meta,.help-text){
  color:var(--csp-muted)!important;
}

/* Public homepage: UpCloud-like polish, but custom Cybaaspace dark style */
html body .public-hero,
html body .home-hero{
  min-height:560px!important;
  align-items:center!important;
  border:0!important;
  outline:1px solid rgba(130,177,235,.11)!important;
  border-radius:34px!important;
  background:
    radial-gradient(circle at 78% 26%,rgba(18,151,255,.16),transparent 24%),
    radial-gradient(circle at 94% 12%,rgba(118,87,255,.14),transparent 22%),
    linear-gradient(180deg,rgba(8,20,38,.72),rgba(5,12,23,.78))!important;
  box-shadow:0 30px 100px rgba(0,0,0,.30)!important;
}
html body .public-hero .eyebrow,
html body .eyebrow{
  padding:7px 12px!important;
  border:0!important;
  outline:1px solid rgba(18,151,255,.20)!important;
  border-radius:999px!important;
  background:rgba(18,151,255,.10)!important;
  color:#7dcbff!important;
  box-shadow:none!important;
}
html body .public-hero h1,
html body .home-hero h1{
  max-width:11ch!important;
  font-size:clamp(3.2rem,6.1vw,6.4rem)!important;
  line-height:.9!important;
  letter-spacing:-.08em!important;
}
html body .hero-copy .lead{
  max-width:690px!important;
  color:#b6c5d8!important;
}
html body .hero-note-grid > div{
  border:0!important;
  outline:1px solid rgba(130,177,235,.08)!important;
  background:rgba(7,17,32,.48)!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px)!important;
}
html body .hero-note-grid > div:before{
  width:2px!important;
  opacity:.75!important;
}
html body .hero-product-card-unique,
html body .hero-product-card{
  border:0!important;
  outline:1px solid rgba(130,177,235,.10)!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(18,151,255,.12),transparent 36%),
    linear-gradient(180deg,rgba(8,19,36,.74),rgba(5,12,23,.72))!important;
  box-shadow:0 28px 90px rgba(0,0,0,.30)!important;
}
html body .hero-orbit-board{
  border:0!important;
  outline:1px solid rgba(130,177,235,.10)!important;
  background:
    radial-gradient(circle at 48% 52%, rgba(18,151,255,.10), transparent 36%),
    linear-gradient(180deg,rgba(6,15,29,.82),rgba(5,12,23,.64))!important;
}
html body .orbit-node{
  border:0!important;
  outline:1px solid rgba(130,177,235,.12)!important;
  background:rgba(7,17,32,.78)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.24)!important;
}
html body .mini-dashboard-head{
  border:0!important;
  outline:1px solid rgba(130,177,235,.09)!important;
}
html body .hero-metric-grid div{
  border:0!important;
  outline:1px solid rgba(130,177,235,.08)!important;
  background:rgba(8,19,36,.62)!important;
  box-shadow:none!important;
}

/* Featured/public cards: fewer boxes, softer product tiles */
html body .featured-packages{
  gap:20px!important;
}
html body .featured-card{
  outline:1px solid rgba(130,177,235,.09)!important;
  background:
    radial-gradient(circle at 92% 0%,rgba(18,151,255,.10),transparent 34%),
    linear-gradient(180deg,rgba(11,24,44,.70),rgba(7,17,32,.72))!important;
  box-shadow:0 22px 70px rgba(0,0,0,.22)!important;
  transform:none!important;
}
html body .featured-card.featured{
  transform:translateY(-6px)!important;
  outline-color:rgba(18,151,255,.20)!important;
}
html body .featured-card:before{
  left:24px!important;
  right:auto!important;
  width:46px!important;
  height:3px!important;
  opacity:.85!important;
}
html body .featured-card:hover{
  transform:translateY(-7px)!important;
}
html body .feature-list-clean div{
  border:0!important;
  outline:1px solid rgba(130,177,235,.08)!important;
  background:rgba(8,19,36,.58)!important;
  box-shadow:none!important;
}
html body .section-chip-row span,
html body .trust-row span{
  border:0!important;
  outline:1px solid rgba(130,177,235,.09)!important;
  background:rgba(7,17,32,.58)!important;
}

/* Dashboard KPI/metric cards with subtle icon orbs */
html body .kpi-grid,
html body .metric-grid,
html body .stat-row{
  gap:18px!important;
}
html body .kpi,
html body .metric,
html body .stat,
html body .dashboard-card{
  position:relative!important;
  overflow:hidden!important;
  border:0!important;
  outline:1px solid rgba(130,177,235,.09)!important;
  background:
    radial-gradient(circle at 16% 12%,rgba(18,151,255,.11),transparent 30%),
    linear-gradient(180deg,rgba(11,24,44,.72),rgba(6,15,29,.74))!important;
  box-shadow:0 18px 54px rgba(0,0,0,.20)!important;
}
html body .kpi:after,
html body .metric:after,
html body .stat:after{
  content:""!important;
  position:absolute!important;
  right:-24px!important;
  top:-24px!important;
  width:96px!important;
  height:96px!important;
  border-radius:999px!important;
  background:radial-gradient(circle,rgba(18,151,255,.12),transparent 68%)!important;
  pointer-events:none!important;
}
html body .kpi small,
html body .metric span,
html body .stat span{
  color:#92a8c3!important;
  letter-spacing:.075em!important;
}
html body .kpi strong,
html body .metric b,
html body .stat b{
  color:#fff!important;
}

/* Tables: closer to UpCloud/admin SaaS, not boxed grid-heavy */
html body :where(.table,.admin-modern-table,.cloud-table,table.csp-enhanced-table){
  border-collapse:separate!important;
  border-spacing:0 8px!important;
  width:100%!important;
  background:transparent!important;
}
html body :where(.table th,.admin-modern-table th,.cloud-table th,table.csp-enhanced-table th){
  height:42px!important;
  background:transparent!important;
  color:#8ea2bd!important;
  border:0!important;
  padding:0 16px!important;
  font-size:.75rem!important;
  letter-spacing:.075em!important;
  text-transform:uppercase!important;
  box-shadow:none!important;
}
html body table.csp-enhanced-table th .csp-th-inner{
  min-height:42px!important;
  padding:0!important;
}
html body table.csp-enhanced-table th .csp-sort-icon{
  width:18px!important;
  height:18px!important;
  flex-basis:18px!important;
  border:0!important;
  background:rgba(18,151,255,.13)!important;
  color:#86d6ff!important;
}
html body :where(.table td,.admin-modern-table td,.cloud-table td,table.csp-enhanced-table td){
  border:0!important;
  background:rgba(8,19,36,.48)!important;
  color:#eaf2ff!important;
  padding:13px 16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),inset 0 -1px 0 rgba(130,177,235,.035)!important;
}
html body :where(.table tr td:first-child,.admin-modern-table tr td:first-child,.cloud-table tr td:first-child,table.csp-enhanced-table tr td:first-child){
  border-radius:15px 0 0 15px!important;
}
html body :where(.table tr td:last-child,.admin-modern-table tr td:last-child,.cloud-table tr td:last-child,table.csp-enhanced-table tr td:last-child){
  border-radius:0 15px 15px 0!important;
}
html body :where(.table tr:hover td,.admin-modern-table tr:hover td,.cloud-table tr:hover td,table.csp-enhanced-table tr:hover td){
  background:rgba(13,31,57,.76)!important;
}
html body .csp-table-controls{
  border:0!important;
  outline:1px solid rgba(130,177,235,.09)!important;
  border-radius:22px!important;
  background:rgba(7,17,32,.48)!important;
  box-shadow:none!important;
}
html body .csp-table-search input,
html body .csp-table-page-size select{
  height:42px!important;
  border-radius:999px!important;
  border:0!important;
  outline:1px solid rgba(130,177,235,.12)!important;
  background:rgba(4,11,22,.65)!important;
}

/* Queue admin actions: clean manual status controls */
html body .queue-actions{
  gap:7px!important;
}
html body .queue-actions .btn,
html body td .btn.small{
  min-height:32px!important;
  border-radius:10px!important;
  border:0!important;
  outline:1px solid rgba(130,177,235,.12)!important;
  background:rgba(7,17,32,.74)!important;
  box-shadow:none!important;
}
html body .queue-actions .btn.success,
html body .btn.success{
  background:rgba(69,232,137,.10)!important;
  color:#80f5b1!important;
  outline-color:rgba(69,232,137,.28)!important;
}
html body .queue-actions .btn.danger,
html body .btn.danger{
  background:rgba(255,94,115,.11)!important;
  color:#ff9aa8!important;
  outline-color:rgba(255,94,115,.28)!important;
}

/* Forms/buttons: premium but less outlined */
html body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,input[type="search"],.read-field){
  border:0!important;
  outline:1px solid rgba(130,177,235,.12)!important;
  border-radius:14px!important;
  background:rgba(5,13,25,.72)!important;
  color:#f7fbff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html body :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select,textarea,input[type="search"]):focus{
  outline-color:rgba(18,151,255,.55)!important;
  box-shadow:0 0 0 4px rgba(18,151,255,.11)!important;
}
html body :where(.btn,.action-btn,.copy-btn,button:not(.plain),input[type="submit"]){
  border:0!important;
  outline:1px solid rgba(130,177,235,.13)!important;
  border-radius:13px!important;
  background:rgba(8,19,36,.72)!important;
  box-shadow:none!important;
}
html body :where(.btn.primary,button.primary,input[type="submit"].primary){
  background:linear-gradient(135deg,#1297ff,#245dff)!important;
  outline-color:transparent!important;
  box-shadow:0 16px 38px rgba(18,151,255,.20)!important;
}
html body :where(.btn.primary:hover,button.primary:hover,input[type="submit"].primary:hover){
  box-shadow:0 18px 46px rgba(18,151,255,.28)!important;
}

/* Status, badges and progress */
html body :where(.badge,.status-pill,.invoice-status,.plan-tag,.plan-kind){
  border:0!important;
  outline:1px solid rgba(130,177,235,.10)!important;
  border-radius:999px!important;
}
html body :where(.progress,.bar,.usage-bar){
  border:0!important;
  background:rgba(255,255,255,.06)!important;
}
html body :where(.progress i,.bar i,.usage-bar i){
  background:linear-gradient(90deg,var(--csp-blue),var(--csp-cyan))!important;
}

/* Live graphs/canvas shells: no white boxed look */
html body :where(.mini-chart,.chart-card,.metric-chart,.graph-card,canvas){
  border:0!important;
  outline:1px solid rgba(130,177,235,.08)!important;
  background:rgba(5,13,25,.60)!important;
  border-radius:18px!important;
}

/* Footer: softer enterprise finish */
html body .site-footer,
html body .footer{
  background:transparent!important;
  border-top:0!important;
}
html body .site-footer-inner{
  border:0!important;
  outline:1px solid rgba(130,177,235,.08)!important;
  border-radius:30px!important;
  background:linear-gradient(180deg,rgba(9,21,40,.52),rgba(5,12,23,.50))!important;
  box-shadow:0 22px 60px rgba(0,0,0,.18)!important;
  padding:32px!important;
}

/* Responsive adjustments */
@media(max-width:1180px){
  html body .topbar-inner{
    grid-template-columns:auto 1fr!important;
    gap:16px!important;
    padding:12px 0!important;
  }
  html body .public-nav{
    order:3!important;
    grid-column:1 / -1!important;
    overflow-x:auto!important;
    padding-bottom:2px!important;
  }
  html body .top-actions{
    justify-self:end!important;
  }
  html body .app-shell{
    grid-template-columns:1fr!important;
  }
}
@media(max-width:760px){
  html body .topbar-inner,
  html body main.container,
  html body .app-shell{
    width:min(100% - 24px,1540px)!important;
  }
  html body .brand-link{min-width:0!important;max-width:170px!important;}
  html body .brand-logo{height:40px!important;max-width:150px!important;}
  html body .top-actions{gap:7px!important;flex-wrap:wrap!important;}
  html body .language-switcher{height:38px!important;}
  html body .wallet-chip{height:38px!important;min-height:38px!important;padding:0 12px!important;font-size:.86rem!important;}
  html body .icon-btn{width:38px!important;height:38px!important;min-width:38px!important;}
  html body .public-hero,
  html body .home-hero{padding:30px!important;min-height:auto!important;}
  html body .public-hero h1,
  html body .home-hero h1{font-size:clamp(2.55rem,13vw,4.1rem)!important;}
  html body .hero-note-grid{grid-template-columns:1fr!important;}
}