/* HR OPTIMIZER — visual redesign 2026-10-08
   UI-only layer. Processing, auth, quota and payment logic untouched. */

:root{
  --hr-bg:#070910;
  --hr-bg-2:#0a0d16;
  --hr-surface:#0f1420;
  --hr-surface-2:#121827;
  --hr-line:rgba(147,157,193,.16);
  --hr-line-strong:rgba(157,168,214,.28);
  --hr-text:#f7f8ff;
  --hr-muted:#9298ad;
  --hr-soft:#b9bfd0;
  --hr-blue:#6f8cff;
  --hr-violet:#a66cff;
  --hr-cyan:#62d8ff;
  --hr-green:#65e0b2;
  --hr-shadow:0 26px 80px rgba(0,0,0,.42);
}

html{background:var(--hr-bg)!important}
body{
  min-height:100vh!important;
  background:
    radial-gradient(900px 580px at 82% 7%,rgba(111,87,255,.16),transparent 62%),
    radial-gradient(720px 520px at 4% 32%,rgba(60,155,255,.09),transparent 60%),
    linear-gradient(180deg,#070910 0%,#090c14 48%,#080a11 100%)!important;
  color:var(--hr-text)!important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.16;
  background-image:
    linear-gradient(rgba(133,145,183,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(133,145,183,.06) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 82%);
}
body::after{
  content:"";
  position:fixed;
  width:460px;height:460px;
  right:-180px;top:180px;
  z-index:-2;
  pointer-events:none;
  border-radius:50%;
  background:radial-gradient(circle,rgba(129,90,255,.12),transparent 68%);
  filter:blur(20px);
}
.noise{opacity:.018!important}

.topbar{
  position:sticky!important;
  top:12px!important;
  z-index:30!important;
  width:min(1180px,calc(100% - 28px))!important;
  max-width:none!important;
  height:66px!important;
  margin:12px auto 0!important;
  padding:8px 10px 8px 16px!important;
  border:1px solid rgba(153,164,202,.16)!important;
  border-radius:18px!important;
  background:rgba(10,13,22,.76)!important;
  backdrop-filter:blur(20px)!important;
  box-shadow:0 18px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.brand-logo{width:45px!important;height:45px!important}
.brand-logo-svg{width:45px!important;height:45px!important;filter:drop-shadow(0 8px 18px rgba(100,75,255,.18))}
nav{
  gap:4px!important;
  padding:4px!important;
  border:1px solid rgba(142,151,186,.10)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.018)!important;
}
nav a{
  padding:9px 12px!important;
  border-radius:9px!important;
  color:#aeb4c6!important;
  font-size:11px!important;
}
nav a:hover{
  color:#fff!important;
  background:rgba(255,255,255,.055)!important;
}
.head-actions{gap:7px!important}
.dash-link{
  padding:9px 11px!important;
  border:1px solid rgba(132,144,187,.14)!important;
  border-radius:10px!important;
  color:#bcc2d2!important;
  background:rgba(255,255,255,.02)!important;
}
.login{
  min-height:40px!important;
  padding:9px 14px!important;
  border-color:rgba(123,139,205,.28)!important;
  border-radius:11px!important;
  background:linear-gradient(180deg,rgba(29,35,54,.95),rgba(18,22,35,.95))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.login:hover{border-color:rgba(145,159,240,.48)!important;transform:translateY(-1px)}
.discord{color:#bca8ff!important}

.hero{
  width:min(1180px,100%)!important;
  min-height:760px!important;
  padding:92px 24px 76px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr)!important;
  grid-template-rows:auto auto auto auto 1fr!important;
  grid-template-areas:
    "eyebrow workflow"
    "title workflow"
    "desc workflow"
    "buttons workflow"
    "fine workflow"!important;
  column-gap:64px!important;
  align-items:start!important;
}
.hero .eyebrow{grid-area:eyebrow!important;margin-top:14px!important}
.hero h1{
  grid-area:title!important;
  max-width:720px!important;
  margin:22px 0 16px!important;
  font-size:clamp(45px,5.7vw,76px)!important;
  line-height:1.16!important;
  letter-spacing:-3.6px!important;
}
.hero h1 em{
  background:linear-gradient(100deg,#d7e1ff 2%,#8ea7ff 34%,#bd7cff 84%)!important;
  background-clip:text!important;
  -webkit-background-clip:text!important;
  text-shadow:0 0 38px rgba(135,105,255,.16)!important;
}
.hero>p{
  grid-area:desc!important;
  max-width:610px!important;
  margin:0!important;
  color:#9ba2b6!important;
  font-size:13px!important;
  line-height:2!important;
}
.hero-buttons{
  grid-area:buttons!important;
  margin-top:28px!important;
  align-items:center!important;
}
.hero .button{
  min-height:48px!important;
  border-radius:12px!important;
  padding:13px 20px!important;
  font-size:11px!important;
}
.hero .primary{
  background:linear-gradient(110deg,#5f7eff,#9d57ef)!important;
  box-shadow:0 16px 42px rgba(87,70,222,.24),inset 0 1px 0 rgba(255,255,255,.15)!important;
}
.hero .primary:hover{box-shadow:0 19px 50px rgba(103,76,240,.30),inset 0 1px 0 rgba(255,255,255,.18)!important}
.hero .quiet{
  background:rgba(16,20,31,.78)!important;
  border-color:rgba(131,142,182,.20)!important;
}
.hero .fine{
  grid-area:fine!important;
  max-width:560px!important;
  color:#71788b!important;
  margin:15px 0 0!important;
  line-height:1.8!important;
}

.workflow{
  grid-area:workflow!important;
  align-self:stretch!important;
  width:auto!important;
  min-height:100%!important;
  margin:0!important;
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(144,157,207,.19)!important;
  border-radius:24px!important;
  padding:18px!important;
  background:
    radial-gradient(380px 260px at 30% 12%,rgba(110,91,255,.16),transparent 66%),
    linear-gradient(150deg,rgba(19,24,40,.97),rgba(10,13,22,.94))!important;
  box-shadow:var(--hr-shadow),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.workflow::before{
  content:"";
  position:absolute;
  left:18px;right:18px;top:72px;
  height:240px;
  border-radius:18px;
  border:1px solid rgba(140,151,201,.15);
  background:
    linear-gradient(180deg,rgba(8,11,18,.08),rgba(7,9,15,.76)),
    radial-gradient(circle at 30% 35%,rgba(85,118,255,.40),transparent 24%),
    radial-gradient(circle at 70% 65%,rgba(191,85,255,.30),transparent 30%),
    linear-gradient(135deg,#11182b,#0b0e18 68%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 25px 50px rgba(0,0,0,.28);
}
.workflow::after{
  content:"LIVE PREVIEW";
  position:absolute;
  left:32px;top:87px;
  padding:5px 8px;
  border:1px solid rgba(184,196,255,.22);
  border-radius:999px;
  background:rgba(12,15,27,.72);
  color:#cbd4ff;
  font:700 8px/1 'Space Grotesk',sans-serif;
  letter-spacing:1.4px;
  box-shadow:0 7px 20px rgba(0,0,0,.18);
}
.flow-head{position:relative;z-index:2!important;min-height:34px!important}
.flow-head code{
  padding:6px 9px!important;
  border:1px solid rgba(100,224,178,.16)!important;
  border-radius:999px!important;
  color:#7fe0ba!important;
  background:rgba(67,201,150,.06)!important;
}
.flow-steps{
  position:absolute!important;
  left:18px!important;right:18px!important;bottom:18px!important;
  margin:0!important;
  padding:14px!important;
  border:1px solid rgba(143,153,194,.12)!important;
  border-radius:15px!important;
  background:rgba(7,10,17,.56)!important;
  backdrop-filter:blur(14px)!important;
}
.flow-steps>div{gap:6px!important}
.flow-steps .ico{
  width:36px!important;height:36px!important;
  border-radius:11px!important;
  border:1px solid rgba(144,153,208,.14)!important;
  background:linear-gradient(180deg,#1c2440,#151a2c)!important;
  color:#bdc8ff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.flow-steps b{font-size:9px!important;color:#c6cbda!important}
.flow-steps i{max-width:50px!important;background:linear-gradient(90deg,rgba(122,138,206,.38),rgba(122,138,206,.08))!important}

.section{
  width:min(1180px,100%)!important;
  padding:96px 24px!important;
}
.section-kicker{
  font:700 9px/1 'Space Grotesk',Alexandria,sans-serif!important;
  color:#7e879e!important;
  letter-spacing:1.5px!important;
  text-transform:uppercase!important;
}
.optimizer{
  border-top:1px solid rgba(132,143,181,.10)!important;
}
.optimizer .section-title{
  margin-top:14px!important;
  align-items:flex-end!important;
}
.optimizer .section-title h2{
  font-size:clamp(34px,4vw,52px)!important;
  letter-spacing:-2px!important;
}
.optimizer .section-title p{max-width:520px!important;color:#8f96a9!important}
.setup{
  max-width:310px!important;
  padding:13px 14px!important;
  border:1px solid rgba(132,142,184,.15)!important;
  border-radius:13px!important;
  background:rgba(18,23,36,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.setup>span{color:#ffbf7b!important;text-shadow:0 0 12px rgba(255,191,123,.35)}
.dropzone{
  min-height:390px!important;
  margin-top:26px!important;
  position:relative!important;
  overflow:hidden!important;
  border:1px dashed rgba(135,151,211,.34)!important;
  border-radius:22px!important;
  background:
    radial-gradient(460px 250px at 50% 25%,rgba(91,113,255,.10),transparent 70%),
    linear-gradient(145deg,rgba(16,20,32,.92),rgba(10,13,22,.92))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.dropzone::before{
  content:"DROP ZONE";
  position:absolute;
  top:18px;left:20px;
  font:700 8px/1 'Space Grotesk',sans-serif;
  letter-spacing:1.5px;
  color:#616a7f;
  padding:6px 8px;
  border:1px solid rgba(119,131,166,.12);
  border-radius:999px;
  background:rgba(255,255,255,.018);
}
.dropzone::after{
  content:"LOCAL • PRIVATE";
  position:absolute;
  top:18px;right:20px;
  font:700 8px/1 'Space Grotesk',sans-serif;
  letter-spacing:1.2px;
  color:#78d7b1;
  padding:6px 8px;
  border:1px solid rgba(96,216,177,.16);
  border-radius:999px;
  background:rgba(65,193,145,.05);
}
.dropzone:hover,.dropzone.drag{
  border-color:rgba(129,151,255,.64)!important;
  background:
    radial-gradient(480px 260px at 50% 25%,rgba(92,119,255,.14),transparent 72%),
    linear-gradient(145deg,rgba(18,23,39,.96),rgba(11,14,24,.96))!important;
  box-shadow:0 30px 90px rgba(71,71,190,.16),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.drop-icon{
  width:78px!important;height:78px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#202a52,#181d35)!important;
  border:1px solid rgba(140,156,236,.18)!important;
  color:#bdc9ff!important;
  box-shadow:0 16px 45px rgba(43,48,133,.22),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.dropzone h3{font-size:21px!important;margin:17px 0 7px!important}
.dropzone p{font-size:12px!important;color:#a2a9ba!important}
.dropzone span{font-size:10px!important;margin-top:12px!important;color:#69738a!important}

.file-card{
  margin-top:18px!important;
  padding:18px!important;
  border:1px solid rgba(139,150,196,.18)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(18,23,37,.96),rgba(12,15,25,.96))!important;
  box-shadow:0 22px 65px rgba(0,0,0,.20)!important;
}
.metadata{
  gap:1px!important;
  margin-top:17px!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:rgba(118,130,170,.13)!important;
}
.metadata>div{background:rgba(18,22,34,.92)!important;padding:13px!important}
.metadata b{color:#eef0f7!important}

.notice{
  padding:10px 11px!important;
  border:1px solid rgba(133,145,184,.10)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.014)!important;
}
.notice span{
  border-color:rgba(126,147,250,.35)!important;
  color:#a9b8ff!important;
  background:rgba(96,113,220,.06)!important;
}

.video-insights{
  border-color:rgba(132,147,209,.20)!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,rgba(24,28,47,.85),rgba(14,18,29,.94))!important;
  box-shadow:0 16px 42px rgba(0,0,0,.16)!important;
}
.checks{
  padding:24px!important;
  margin-top:20px!important;
  border-color:rgba(133,145,185,.15)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(15,19,30,.96),rgba(11,14,23,.96))!important;
  box-shadow:0 20px 70px rgba(0,0,0,.18)!important;
}
.check-grid span{
  border-color:rgba(134,146,185,.13)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.015)!important;
}

.how{border-top:1px solid rgba(132,143,182,.10)!important}
.how h2{
  margin:15px 0 34px!important;
  font-size:clamp(34px,4vw,52px)!important;
}
.timeline{
  border:0!important;
  gap:12px!important;
}
.timeline article{
  position:relative!important;
  min-height:210px!important;
  padding:22px!important;
  border:1px solid rgba(132,143,181,.15)!important;
  border-radius:16px!important;
  background:linear-gradient(150deg,rgba(16,21,33,.90),rgba(11,14,23,.90))!important;
  box-shadow:0 20px 55px rgba(0,0,0,.14)!important;
  transition:transform .22s ease,border-color .22s ease,background .22s ease!important;
}
.timeline article:first-child{border-inline-start:1px solid rgba(132,143,181,.15)!important}
.timeline article:hover{
  transform:translateY(-5px)!important;
  border-color:rgba(139,155,235,.28)!important;
  background:linear-gradient(150deg,rgba(20,25,41,.96),rgba(12,16,27,.96))!important;
}
.timeline span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:38px!important;height:28px!important;
  border:1px solid rgba(127,145,229,.20)!important;
  border-radius:8px!important;
  background:rgba(105,122,230,.06)!important;
  color:#a6b4ff!important;
}
.timeline h3{font-size:15px!important;margin:32px 0 9px!important}
.timeline p{font-size:10px!important;color:#7f879b!important;line-height:1.9!important}

.plans{
  position:relative!important;
  background:
    radial-gradient(720px 260px at 50% 18%,rgba(116,83,238,.09),transparent 72%),
    linear-gradient(180deg,transparent,#0b0e17 20%,#0b0e17 80%,transparent)!important;
}
.plans-head{align-items:flex-end!important;margin-top:15px!important}
.plans-head h2{
  font-size:clamp(34px,4vw,52px)!important;
  letter-spacing:-2px!important;
}
.plans-head p{max-width:520px!important}
.rate{
  border-color:rgba(139,121,226,.20)!important;
  border-radius:999px!important;
  color:#b9abff!important;
  background:rgba(129,98,236,.05)!important;
}

.plan-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
  margin-top:34px!important;
}
.plan-grid article,
.plan-grid article.featured{
  height:560px!important;
  min-height:560px!important;
  max-height:560px!important;
  margin-top:0!important;
  padding:28px!important;
  border:1px solid rgba(135,147,190,.16)!important;
  border-radius:20px!important;
  background:
    radial-gradient(280px 140px at 16% 0%,rgba(86,110,255,.07),transparent 74%),
    linear-gradient(150deg,rgba(17,22,35,.97),rgba(10,13,22,.97))!important;
  box-shadow:0 24px 80px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
.plan-grid article:hover{
  transform:translateY(-6px)!important;
  border-color:rgba(141,154,205,.28)!important;
  box-shadow:0 32px 95px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.045)!important;
}
.plan-grid article.featured{
  border-color:rgba(142,117,255,.48)!important;
  background:
    radial-gradient(370px 190px at 50% -2%,rgba(140,96,255,.20),transparent 72%),
    linear-gradient(150deg,rgba(28,24,56,.98),rgba(15,14,28,.98))!important;
  box-shadow:0 28px 100px rgba(82,56,194,.19),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.plan-grid article::before{
  left:28px!important;top:28px!important;
  width:46px!important;height:46px!important;
  border-radius:13px!important;
  background:rgba(43,47,70,.60)!important;
  border-color:rgba(126,137,184,.17)!important;
}
.plan-grid article.featured::before{
  background:rgba(126,91,229,.12)!important;
  border-color:rgba(153,127,255,.42)!important;
}
.plan-grid article .plan-no{
  margin-bottom:34px!important;
  color:#686f84!important;
}
.plan-grid article h3{
  font-size:28px!important;
  margin:0 0 7px!important;
}
.plan-grid article>p{
  font-size:11px!important;
  color:#8e95a8!important;
  margin:0 0 28px!important;
}
.plan-grid .plan-price{
  min-height:54px!important;
  margin:0 0 22px!important;
}
.plan-grid .plan-price strong{
  font-size:35px!important;
  color:#f7f8ff!important;
}
.plan-grid .plan-price small{color:#8f96aa!important}
.plan-grid .ref-features{
  top:255px!important;
  left:28px!important;right:28px!important;
}
.plan-grid .ref-features li{
  min-height:47px!important;height:47px!important;
  padding:0 6px!important;
  border-top-color:rgba(129,140,180,.12)!important;
}
.plan-grid .ref-features li:last-child{border-bottom-color:rgba(129,140,180,.12)!important}
.plan-grid .ref-features li::before{
  width:29px!important;height:29px!important;
  border-radius:9px!important;
  background:rgba(48,52,76,.46)!important;
  border-color:rgba(131,143,188,.13)!important;
  color:#bcc6ff!important;
}
.plan-grid .ref-features .feature-label{
  color:#9ba2b5!important;
  font-size:11px!important;
}
.plan-grid .ref-features b{color:#eef0f7!important}
.plan-grid .plan-btn{
  left:28px!important;right:28px!important;bottom:28px!important;
  height:52px!important;min-height:52px!important;
  border-radius:12px!important;
}
.plan-grid article:not(.featured) .plan-btn{
  background:rgba(10,14,23,.72)!important;
  border-color:rgba(130,144,190,.19)!important;
}
.plan-grid article.featured .plan-btn,
.plan-grid article:last-child .plan-btn:not(.plan-btn-current){
  background:linear-gradient(100deg,#617fff,#a64ced)!important;
  box-shadow:0 15px 38px rgba(98,70,218,.26)!important;
}
.plan-grid article.featured .tag,
.plan-grid article:nth-child(3) .plan-no::after{
  border-color:rgba(209,192,255,.34)!important;
  background:linear-gradient(100deg,rgba(91,71,211,.92),rgba(165,79,237,.92))!important;
  box-shadow:0 10px 25px rgba(88,56,204,.22)!important;
}

.legal-section{padding-top:36px!important}
.legal-grid{gap:14px!important}
.legal-card{
  border-color:rgba(132,144,183,.15)!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,rgba(16,21,33,.88),rgba(11,14,23,.9))!important;
  box-shadow:0 18px 55px rgba(0,0,0,.12)!important;
}
.legal-card:hover{
  border-color:rgba(140,153,216,.26)!important;
  background:linear-gradient(145deg,rgba(21,26,41,.96),rgba(13,17,29,.96))!important;
}

.cta{
  margin-top:24px!important;
  padding-top:90px!important;
  padding-bottom:118px!important;
  border-top:1px solid rgba(132,143,181,.11)!important;
  position:relative!important;
}
.cta::before{
  content:"";
  position:absolute;
  inset:52px 24px 52px;
  border-radius:24px;
  border:1px solid rgba(127,141,199,.13);
  background:
    radial-gradient(420px 180px at 78% 50%,rgba(112,88,255,.13),transparent 70%),
    linear-gradient(110deg,rgba(17,22,35,.72),rgba(15,18,31,.32));
  pointer-events:none;
}
.cta>div,.cta>a{position:relative;z-index:1}
.cta h2{font-size:clamp(34px,4vw,52px)!important;letter-spacing:-2px!important}
.cta .button{min-height:50px!important;padding-inline:23px!important}

footer{
  width:min(1180px,100%)!important;
  padding:31px 24px 48px!important;
  border-top-color:rgba(132,143,181,.11)!important;
}
footer p{color:#6f778b!important}
footer a{color:#8f96aa!important}
footer a:hover{color:#eef1ff!important}
.support-contact a{color:#a9b0c2!important}

.modal{
  background:rgba(4,6,11,.78)!important;
  backdrop-filter:blur(14px)!important;
}
.modal-box{
  border-color:rgba(139,153,206,.24)!important;
  border-radius:20px!important;
  background:linear-gradient(150deg,#151a29,#0c101a)!important;
  box-shadow:0 35px 110px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.toast{
  border-color:rgba(138,153,213,.22)!important;
  border-radius:12px!important;
  background:rgba(18,23,37,.94)!important;
}

@media(max-width:960px){
  .topbar{width:calc(100% - 20px)!important}
  nav{gap:0!important}
  nav a{padding:8px 9px!important}
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(300px,.82fr)!important;
    column-gap:34px!important;
  }
}
@media(max-width:760px){
  .topbar{
    top:8px!important;
    margin-top:8px!important;
    width:calc(100% - 14px)!important;
    height:60px!important;
    padding:7px 8px!important;
    border-radius:15px!important;
  }
  .brand-logo{width:42px!important;height:42px!important}
  .brand-logo-svg{width:42px!important;height:42px!important}
  nav,.dash-link{display:none!important}
  .login{
    font-size:10px!important;
    padding:8px 11px!important;
    min-height:38px!important;
  }
  .menu{display:block!important;border-radius:10px!important;padding:8px 11px!important}
  .hero{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    min-height:auto!important;
    padding:66px 18px 56px!important;
  }
  .hero .eyebrow{margin-top:4px!important}
  .hero h1{
    margin-top:18px!important;
    margin-bottom:14px!important;
    font-size:clamp(37px,11vw,54px)!important;
    letter-spacing:-2.4px!important;
  }
  .hero>p{font-size:12px!important;line-height:1.95!important}
  .hero-buttons{margin-top:22px!important}
  .hero .button{flex:1!important;min-height:46px!important}
  .hero .fine{margin-top:13px!important}
  .workflow{
    min-height:500px!important;
    margin-top:38px!important;
    width:100%!important;
    border-radius:20px!important;
  }
  .workflow::before{height:220px!important}
  .flow-steps{gap:5px!important}
  .flow-steps i{max-width:22px!important}
  .flow-steps>div{min-width:44px!important}
  .section{padding:70px 18px!important}
  .section-title,.plans-head{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:16px!important;
  }
  .setup{max-width:none!important;width:100%!important}
  .dropzone{min-height:320px!important}
  .metadata{grid-template-columns:repeat(2,1fr)!important}
  .metadata>div:last-child{grid-column:1/-1!important}
  .checks{flex-direction:column!important;gap:18px!important;padding:18px!important}
  .check-grid{grid-template-columns:1fr!important}
  .timeline{grid-template-columns:1fr!important}
  .timeline article{min-height:170px!important}
  .plan-grid{grid-template-columns:1fr!important}
  .plan-grid article,.plan-grid article.featured{
    height:auto!important;
    min-height:540px!important;
    max-height:none!important;
  }
  .plan-grid .ref-features{top:auto!important;position:relative!important;left:auto!important;right:auto!important}
  .plan-grid .plan-btn{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin-top:18px!important}
  .legal-grid{grid-template-columns:1fr!important}
  .cta{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:22px!important;
    padding-top:70px!important;
    padding-bottom:90px!important;
  }
  .cta::before{inset:36px 18px 36px!important}
  footer{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:17px!important;
  }
  footer div:last-child{
    flex-wrap:wrap!important;
    gap:10px 16px!important;
  }
}


/* FINAL SCALE BALANCE — keep the new look without making UI elements feel undersized */
@media (min-width:761px){
  .topbar{height:74px!important;padding:9px 13px 9px 18px!important;border-radius:18px!important}
  .brand-logo,.brand-logo-svg{width:51px!important;height:51px!important}
  nav a{font-size:13px!important;padding:10px 13px!important}
  .dash-link{font-size:12px!important;padding:10px 12px!important}
  .login{font-size:12px!important;padding:10px 15px!important}
  .hero{min-height:720px!important;padding-top:82px!important}
  .hero h1{font-size:clamp(44px,5.2vw,70px)!important;letter-spacing:-3px!important}
  .hero>p{font-size:14px!important;max-width:650px!important}
  .hero .button{font-size:12px!important;min-height:50px!important;padding:14px 21px!important}
  .section{padding-top:88px!important;padding-bottom:88px!important}
  .section h2,.plans-head h2,.how h2,.cta h2{font-size:clamp(36px,3.8vw,50px)!important}
  .optimizer .section-title p,.plans-head p{font-size:13px!important}
  .dropzone{min-height:410px!important}
  .dropzone h3{font-size:22px!important}
  .dropzone p{font-size:13px!important}
  .plan-grid article,.plan-grid article.featured{
    height:575px!important;min-height:575px!important;max-height:575px!important;
    padding:30px!important;
  }
  .plan-grid article h3{font-size:30px!important}
  .plan-grid article>p{font-size:12px!important}
  .plan-grid .plan-price strong{font-size:38px!important}
  .plan-grid .ref-features{left:30px!important;right:30px!important;top:262px!important}
  .plan-grid .ref-features .feature-label{font-size:12px!important}
  .plan-grid .ref-features b{font-size:14px!important}
  .plan-grid .plan-btn{left:30px!important;right:30px!important;bottom:30px!important;height:54px!important;min-height:54px!important;font-size:14px!important}
}


/* DESKTOP COMPACT / FULL-WIDTH PASS — reduce dead space and use more of the viewport */
@media (min-width:761px){
  .topbar{
    width:min(1380px,calc(100% - 44px))!important;
  }

  .hero,
  .section,
  footer{
    width:min(1380px,calc(100% - 44px))!important;
  }

  .hero{
    min-height:620px!important;
    padding:62px 18px 48px!important;
    grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;
    column-gap:46px!important;
  }

  .workflow{
    min-height:520px!important;
  }

  .section{
    padding:58px 18px!important;
  }

  .optimizer .section-title{
    margin-bottom:16px!important;
  }

  .dropzone{
    min-height:350px!important;
    margin-top:18px!important;
  }

  .how{
    padding-top:48px!important;
    padding-bottom:52px!important;
  }

  .how h2{
    margin-bottom:24px!important;
  }

  .timeline article{
    min-height:175px!important;
    padding:20px!important;
  }

  .plans{
    padding-top:48px!important;
    padding-bottom:58px!important;
  }

  .plans-head{
    margin-top:10px!important;
  }

  .plan-grid{
    margin-top:24px!important;
    gap:14px!important;
  }

  .plan-grid article,
  .plan-grid article.featured{
    height:540px!important;
    min-height:540px!important;
    max-height:540px!important;
    padding:26px!important;
  }

  .plan-grid .ref-features{
    top:246px!important;
    left:26px!important;
    right:26px!important;
  }

  .plan-grid .plan-btn{
    left:26px!important;
    right:26px!important;
    bottom:26px!important;
  }

  .legal-section{
    padding-top:20px!important;
    padding-bottom:48px!important;
  }

  .cta{
    margin-top:0!important;
    padding-top:56px!important;
    padding-bottom:72px!important;
  }

  footer{
    padding-top:24px!important;
  }
}

/* Keep mobile clean without changing its functional layout. */
@media (max-width:760px){
  .hero{padding-top:56px!important;padding-bottom:44px!important}
  .section{padding-top:58px!important;padding-bottom:58px!important}
  .plans{padding-top:54px!important}
}


/* RESPONSIVE VIEWPORT SCALE — content grows with larger desktop displays */
@media (min-width:761px){
  .topbar,
  .hero,
  .section,
  footer{
    width:clamp(980px,92vw,1680px)!important;
  }

  .topbar{
    height:clamp(68px,3.6vw,78px)!important;
  }

  .hero{
    min-height:clamp(620px,39vw,760px)!important;
    padding-inline:clamp(18px,1.7vw,34px)!important;
    padding-top:clamp(58px,4vw,86px)!important;
    padding-bottom:clamp(46px,3.5vw,72px)!important;
    column-gap:clamp(36px,4vw,72px)!important;
    grid-template-columns:minmax(0,1.08fr) minmax(clamp(420px,30vw,560px),.92fr)!important;
  }

  .hero h1{
    font-size:clamp(48px,4.3vw,82px)!important;
  }

  .hero>p{
    font-size:clamp(13px,1vw,16px)!important;
    max-width:clamp(620px,40vw,760px)!important;
  }

  .workflow{
    min-height:clamp(500px,31vw,610px)!important;
  }

  .section{
    padding-top:clamp(60px,4vw,92px)!important;
    padding-bottom:clamp(60px,4vw,92px)!important;
  }

  .section h2,
  .plans-head h2,
  .how h2,
  .cta h2{
    font-size:clamp(38px,3.5vw,62px)!important;
  }

  .dropzone{
    min-height:clamp(340px,25vw,470px)!important;
  }

  .timeline{
    gap:clamp(12px,1vw,20px)!important;
  }

  .timeline article{
    min-height:clamp(175px,13vw,230px)!important;
  }

  .plan-grid{
    gap:clamp(14px,1.2vw,22px)!important;
  }

  .plan-grid article,
  .plan-grid article.featured{
    height:clamp(540px,31vw,620px)!important;
    min-height:clamp(540px,31vw,620px)!important;
    max-height:clamp(540px,31vw,620px)!important;
    padding:clamp(26px,1.7vw,34px)!important;
  }

  .plan-grid .ref-features{
    top:clamp(246px,13.2vw,285px)!important;
    left:clamp(26px,1.7vw,34px)!important;
    right:clamp(26px,1.7vw,34px)!important;
  }

  .plan-grid .plan-btn{
    left:clamp(26px,1.7vw,34px)!important;
    right:clamp(26px,1.7vw,34px)!important;
    bottom:clamp(26px,1.7vw,34px)!important;
  }

  .legal-grid{
    gap:clamp(14px,1vw,20px)!important;
  }
}

/* On narrower desktop/tablet widths, switch to the existing compact layout safely. */
@media (min-width:761px) and (max-width:1180px){
  .topbar,.hero,.section,footer{width:calc(100% - 24px)!important}
  .hero{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }
  .workflow{
    min-height:460px!important;
    margin-top:34px!important;
  }
}

/* Keep global error/success toasts clear of the floating customer-support launcher. */
#toast {
  z-index: 100000 !important;
  bottom: 108px !important;
  max-width: min(92vw, 520px);
}

@media (max-width: 600px) {
  #toast {
    bottom: 92px !important;
    max-width: calc(100vw - 24px);
  }
}